Как создать эффект снега на сайте на JS | RUDEBOXВот и наступила зима, выпал первый снег, и по настоящему чувствуется что скоро наступит новый год, ведь новогоднее настроение уже парит в воздухе. Люди во всю наряжают елки, а веб-мастера стараются украсить свой сайт новогодними украшениями. В данном уроке мы рассмотрим как создать простой эффект снега для сайта при этом мы будем использовать правила JS и немного новогодней магии. У нас будет рондомное падение снега, при этом мы добавим плавности, кроме этого мы добавили эффект глубины с помощью больших и меньших окружностей снежинок.

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

Шаг 1. HTML

Разметка будет весьма примитивна, у нас будет несколько классов которые выводят необходимые нам элементы на странице, кроме этого добавили несколько спан-классов.

С разметкой мы разобрались, давайте перейдем к следующему шагу. Стили у нас будут отсутствовать, нам необходимы несколько правил для контейнера, и нам необходимо убрать прокрутку. На этом необходимость в стилях отпадает.

Как создать эффект снега на сайте на JS | RUDEBOX

Шаг 2. JS

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

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

Вот и все. Готово!