Скрипт падающих снежинок, листьев, звезд на сайте с помощью js

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

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

Немного о параметрах скрипта

snow_no - на лету создает то количество снежинок, которое вы укажите. Например, 15 - умеренное, а 560 - снегопад.
snow_img - картинка падающих элементов, желательно размером 24X24px, ну или как вам будет нужно. Формат можно ставить любой. Однако, если вы найдете небольшой gif, который будет анимированным, то это еще больше добавит эффекта.
var timeszimaon = 1; - если вам нужно быстро отключить скрипт, то не обязательно его удалять. Если здесь поставить 0, то он не будет работать, если 1, то включится.
snow_stx[i] = 0.02 + Math.random()/10; - регулирует скорость сдвига по горизонтали снежинок. Меняйте 0.02 на любое число.
snow_sty[i] = 0.7 + Math.random(); - регулирует скорость падения элементов, для изменения меняйте число 0.7.

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: