Эффект плавно падающего снега точно привлечёт внимание пользователя, зашедшего к вам на сайт. Если вы хотите добавить что - то подобное, то вам наверняка пригодится плагин под названием snow. Примечателен данный эффект падающего снега тем, что в качестве снежинок используются текстовые символы, из чего делайте вывод: падать могут не только снежинки, а любой символ, подходящий под стилистику вашего сайта.
Начать им пользоваться очень просто. Для этого мы скачиваем архив и подключаем скрипты (jQuery библиотеку и плагин) у себя на странице:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.snow.js" type="text/javascript"></script>
Останется только вызвать сам скрипт:
$.fn.snow();
После этих действий у вас на странице начнут сверху падать снежинки и исчезать, доходя до низа. У данного решения есть свой набор параметров: изменение размера, скорости падения и цвета снежинок. Вот полный перечень настроек, которые помогут вам добиться нужного результата:
- flakeChar - HTML, выполняющий эффект падающих снежинок (по умолчания установлен спецсимвол - ❄);
- minSize - минимальный размер снежинки (регулирует CSS свойство font-size);
- maxSize - максимальный размер снежинки;
- newOn - частота появления (устанавливать значение этого параметра стоит очень аккуратно, так указав слишком малое, браузер начнёт подтормаживать, изначальное - 500);
- flakeColors - массив цветов (изначально указан только один цвет - белый);
- durationMillis - время через которое эффект падающего снега перестанет работать.
Теперь давайте настроим плагин snow и поменяем некоторые параметры, а другие добавим:
$.fn.snow({
minSize: 12,
maxSize: 50,
newOn: 1000,
flakeColor: [
"#ffffff",
"rgb(32, 185, 250)",
"rgb(35, 245, 202)",
"rgb(181, 55, 50)",
"rgb(176, 246, 52)"
]
});
Вот как просто можно добавить к себе на сайт эффект падающего снега. Для этого мы пользовались jQuery плагином snow, а результат его работы вы можете увидеть в материалах «демо».