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

13 декабря 2014 Антон Кулешов 2457 2

Эффект плавно падающего снега точно привлечёт внимание пользователя, зашедшего к вам на сайт. Если вы хотите добавить что - то подобное, то вам наверняка пригодится плагин под названием 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
Есть возможность заменить снежинки на свои картинки? И залить не 1 символ, а несколько?
Антон Кулешов
Антон Кулешов 23 декабря 2014
Да, снежинки можно заменить. Для этого вам стоит в значение параметра flakeChar вставить свой HTML код (flakeChar: "<img src='путь_до_картинки' alt='image' />"). Символ может быть только один.
no_avatar
Читайте далее

Авто эффект печатания текста

31 марта 2016 Антон Кулешов

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

Растянутый на всю ширину HTML список

20 июля 2014 Антон Кулешов

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

Делаем красивые модальные окна при помощи «Sweet Alert» плагина

11 октября 2014 Антон Кулешов

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