Снег на чистом JS максимально просто и понятно

Автор статьи: admin

В этой статье хочется рассказать как сделать снег на js или JavaScript, это сейчас очень актуально, так как, уже зима и многие делают свой сайт под новый год, надеюсь статья будет полезна.

В конце статьи сможете скачать скрипт снега на сайт JavaScript.

Также посмотрите статью как сделать слайдер на JavaScript:
Простой слайдер — Ссылка на статью;
Сложный слайдер — Ссылка на статью;

Настройки снега:

Для начала надо посмотреть настройки отображения снега на странице, вот эта часть скрипта.

// Максимальное количество снежинок на экране

let snowmax = 35;

// Массив цветов снежинок

let snowcolor = new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")

// Массив шрифты для снежков

let snowtype = new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");

// Знак для снежков

let snowletter = "*";

// Скорость падение

let sinkspeed = 0.6;

// Максимальный размер снежков

let snowmaxsize = 40;

// Минимальный размер снежков

let snowminsize = 8;

let snowingzone = 1;

// Массив снежков

let snow = new Array();

// Отступы с низу

let marginbottom;

// Отступы с право

let marginright;

// Таймер

let timer;

let i_snow = 0;

let x_mv = new Array();

let crds = new Array();

let lftrght = new Array();

// Данные о браузере

let browserinfos = navigator.userAgent;

let ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);

let ns6 = document.getElementById&&!document.all;

let opera = browserinfos.match(/Opera/);

// Браузер

let browserok = ie5 || ns6 || opera;

Давайте теперь разберём эту часть скрипта. Как можете заметить, здесь идёт перечисление переменных с настройками снега и его отображения.

В принципе тут и так всё понятно, потому что всё написано в комментариях, что для чего нужно, единственное, что хочется отметить, то что один снежок это по сути знак звёздочка на клавиатуре, в остальном тут пока нечего говорить.

Основной скрипт:

Теперь перейдём к основному скрипту, но перед этим нам нужно создать функция для более удобного создания рандома.

function randommaker(range) {

rand = Math.floor(range * Math.random());

return rand;

}

Это очень полезная функция в этом скрипте, так как, здесь часто будет использоваться рандом и что бы каждый раз писать этот код с разным умножением не очень удобна, поэтому мы используем её.

Теперь посмотрим на часть для отображения снежков.

function initsnow() {

if (ie5 || opera) {

marginbottom=document.body.clientHeight;

marginright=document.body.clientWidth;

}

else if (ns6) {

marginbottom=window.innerHeight;

marginright=window.innerWidth;

}

var snowsizerange = snowmaxsize - snowminsize;

for (i = 0; i <= snowmax; i++) {

crds[i] = 0;

lftrght[i] = Math.random() * 15;

x_mv[i]= 0.03 + Math.random() / 10;

snow[i] = document.getElementById("s" + i);

snow[i].style.fontFamily = snowtype[randommaker(snowtype / length)];

snow[i].size = randommaker(snowsizerange) + snowminsize;

snow[i].style.fontSize = snow[i].size + "px";

snow[i].style.color = snowcolor[randommaker(snowcolor.length)];

snow[i].sink = sinkspeed * snow[i].size / 5;

if (snowingzone == 1) {snow[i].posx = randommaker(marginright - snow[i].size)}

if (snowingzone == 2) {snow[i].posx = randommaker(marginright / 2 - snow[i].size)}

if (snowingzone == 3) {snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4}

if (snowingzone == 4) {snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2}

snow[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);

snow[i].style.left = snow[i].posx + "px";

snow[i].style.top = snow[i].posy + "px";

}

movesnow();

}

Здесь достаточно большой код и объяснять его работу очень трудно, поэтому отмечу лишь основные моменты его работы.

В самом начале мы получаем ширину и высоту экрана, это нужно для вычисления место расположения снежинок. Дальше идёт цикл который нужен для прохождения по массиву снежинок.

В самом цикли мы берём по айди снежинку и присваиваем ей различные параметры, например, цвет, размер и шрифт, ну а в самом конце цикла вычисляется позиция для каждой снежинки.

После закрытия цикла, запускаем функция для вывода снежков на экран, до этого мы только настраивали снежки и изменения позиции.

function movesnow() {

for(i = 0; i <= snowmax; i++) {

crds[i] += x_mv[i];

snow[i].posy += snow[i].sink;

snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";

snow[i].style.top = snow[i].posy + "px";

if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {

if (snowingzone == 1) {snow[i].posx = randommaker(marginright - snow[i].size)}

if (snowingzone == 2) {snow[i].posx = randommaker(marginright / 2 - snow[i].size)}

if (snowingzone == 3) {snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4}

if (snowingzone == 4) {snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2}

snow[i].posy = 0;

}

var timer = setTimeout("movesnow()", 25);

}

for (i = 0; i <= snowmax; i++) {

document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "px;'>" + snowletter + "</span>");

}

if (browserok) {

window.onload = initsnow;

}

Код в этой функции отвечает за то как будет работать анимация снега на js или как можно сказать передвижение снега. Внутри этой функции работает цикл для прохода по всем снежинкам, внутри же цикла изменяется позиция снега, так чтобы он дополнительно колыхался.

В конце функции запускается таймаут для анимации, то есть перед тем как будут сделаны следующие изменения пройдёт не много времени.

После закрытия функции, идёт цикл для создания снежинок и команда которая говорит, чтобы функция которая даёт внешний вид для снежинок, запускалась после того, как закончится загрузка страницы.

Вывод:

В этой статье рассказывалось как сделать снег на JS для сайта, надеюсь вам эта статья была полезна и вы поделитесь её.

Если вы что то не поняли, или просто искали скрипт, то можете его скачать скрипт снега на сайт JavaScript.

Также смотрите статью, где делаем снеговика на CSS: Снеговик на простом CSS.

Скачать файлы

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 1
Средняя оценка: 1,00

Загрузка...

Также рекомендую:

0 комментариев

Межтекстовые Отзывы

Посмотреть все комментарии

Снег на JavaScript