Как сделать падающий снег на сайте с помощью JS

Комментариев нет

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

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

Демо можно посмотреть тут, а скачать исходники по ссылке ниже

Шаг 1. HTML

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

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

Шаг 2. JS

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

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

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

Оцените статью:
ужасноплохонормальнохорошоотлично (оценок: 2, среднее: 5,00 из 5)
Загрузка...

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

Оставьте первый комментарий!

Уведомление о
Войти с помощью: