Снег на JavaScript

снег на js
Метки: / /

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод:

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

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

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

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

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

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