О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Эффект падающего снега на jQuery
  • Инструменты
  • Заработок
  • Раскрутка
13 декабря 2014 . Антон Кулешов

Эффект падающего снега на 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 - время через которое эффект падающего снега перестанет работать.

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

#Бэкграунды и фоны
8 786 2
Антон Кулешов
Слайд-шоу на заднем фоне сайта Видео на заднем фоне Генерация случайного цвета на JavaScript Делаем видео на заднем фоне с помощью jQuery Эффект дождя на JavaScript
ti1schweiger
ti1schweiger
23 декабря 2014
Есть возможность заменить снежинки на свои картинки? И залить не 1 символ, а несколько?
Антон Кулешов
Антон Кулешов
23 декабря 2014
Да, снежинки можно заменить. Для этого вам стоит в значение параметра flakeChar вставить свой HTML код (flakeChar: "<img src='путь_до_картинки' alt='image' />"). Символ может быть только один.

Новостная лента на jQuery

Анимированный прогресс бар в 4 строки кода

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание