Показать Меню
falbar Эффект падающего снега

Эффект падающего снега на jQuery

Эффект падающего снега

Эффект плавно падающего снега точно привлечёт внимание пользователя, зашедшего к Вам на сайт. Если Вы хотите добавить что - то подобное, то Вам наверняка пригодится плагин под названием 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 - время через которое эффект падающего снега перестанет работать.

Теперь давайте настроим плагин и поменяем некоторые параметры, а другие добавим:

$.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, а результат его работы Вы можете увидеть в материалах «демо».

Подписаться на обновления

ti1schweiger
ti1schweiger 23 декабря 2014 в 13:29
Есть возможность заменить снежинки на свои картинки? И залить не 1 символ, а несколько?
Ответить
Антон Кулешов
Антон Кулешов 23 декабря 2014 в 16:57
Да, снежинки можно заменить. Для этого Вам стоит в значение параметра flakeChar вставить свой HTML код (flakeChar: "<img src='путь_до_картинки' alt='image' />"). Символ может быть только один.
Ответить