Снег на Ваш сайт (демо) Snowstorm

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

Скрипт достаточно плавный и недерганный, настройки могут оптимизировать работу скрипта, если он некорректно работает на мобильных устройствах или планшетах.

к содержанию ↑

Что это?

Snowstorm — это снежный эффект, управляемый JavaScript, который можно легко добавить к веб-страницам. Он бесплатный для использования и легко настраивается. Один файл JavaScript предоставляет требуемые функции. Для эффекта снега не используются изображения. Все управление работает с помощью базовых элементов CSS.

Как использовать на сайте?

Это все, что вам нужно для начала работы, подключить в шапку или подвал сайта эту строку:

<script src="snowstorm.js"></script>

Также, если у Вас используются другие пути, то проще использовать

<script src="/path/to/script/snowstorm.js"></script>

Что я могу настроить?

Вы можете регулировать скорость снега, количество снега, «ветер», если и где он должен прилипать (и если он должен «таять»), и, наконец, может ли снег реагировать на перемещение мыши (т. Е. ветер меняется. «). Как Вам шутка про желтый снег в параметре «snowColor»? Гибкость скрипта выражается через огромное число настроек, указанных ниже. Обратите внимание на то, что скрипт может нагружать слабое устройство, вполне себе можно прописать логику определения устройства или ширины экрана для определения устройства, чтобы отключать или показывать скрипт тем или иным устройствам. Также просмотрите отключенные настройки, достаточно интересные. Если мешает Вам тот момент, если движение снега зависит от мыши, то легко можете отключить с мпомощью  параметра followMouse. Также в параметре snowCharacter Вы можете заменить на любой символ, букву или цифру, вместо снежинок будет выставленный Вами символ. Скрипт падающих рандомных букв или символов можете поискать в интернете.

Не забывайте про z-index, бывает что снег не виден сразу, но после наложения слоя, снег адекватно отображается.

this.autoStart = true;       // Должен ли снег начинаться автоматически или нет.
  this.excludeMobile = true;   // Снег, вероятно, будет плохой новостью для процессоров мобильных телефонов (и батарей). Включите на свой страх и риск.
  this.flakesMax = 128;        // Ограничить общее количество снега (падение + прилипание)
  this.flakesMaxActive = 64;   // Ограничение количества снега, падающего сразу (меньше = меньшее использование ЦП)
  this.animationInterval = 33; // Теоретическое измерение «милисекунд на кадр». 20 = быстрый + плавный, но высокий уровень использования ЦП. 50 = более консервативный, но медленный
  this.useGPU = true;          // Включить аппаратное ускорение на основе преобразования, снизить нагрузку на ЦП.
  this.className = null;       // Имя класса CSS для дальнейшей настройки на снежных элементах
  this.excludeMobile = true;   // Снег, вероятно, будет плохими новостями для процессоров мобильных телефонов (и батарей.) По умолчанию, будь славным.
  this.flakeBottom = null;     // Целое значение для ограничения по снегу по оси Y, 0 или null для эффекта «полноэкранный» снег
  this.followMouse = true;     // Движение снега может реагировать на пользовательскую мышь
  this.snowColor = '#fff';     // Не ешьте (или используйте?) Желтый снег.
  this.snowCharacter = '& bull;'; // & bull; = bullet, & middot; квадрат на некоторых системах и т. д.
  this.snowStick = true;       // Должен ли снег «прилипать» внизу. Когда выключено, он никогда не соберется.
  this.targetElement = null;   // элемент, который будет добавлен снегом (null = document.body) - может быть идентификатором элемента, например. 'myDiv' или ссылка узла DOM
  this.useMeltEffect = true;   // При утилизации выпавшего снега (или редко, при падении), он «расплавляется» и исчезает, если браузер поддерживает его
  this.useTwinkleEffect = false; // Позволяет снегу случайно «мерцать» внутри и вне поля зрения при падении
  this.usePositionFixed = false; // true = снег не сдвигается вертикально при прокрутке. Может увеличить загрузку процессора, отключен по умолчанию - если включен, используется только там, где поддерживается
  this.usePixelPosition = false; // Использовать пиксельные значения для снежного покрова / слева против процентов. Auto-enabled if body is position: относительный или целевой элемент.
  // --- менее используемые бит ---
  this.freezeOnBlur = true;     // Только снег, когда окно находится в фокусе (передний план). Сохраняет CPU.
  this.flakeLeftOffset = 0;     // Поле левого края / желоба на краю контейнера (например, окно браузера.) Увеличьте эти значения, если вы видите горизонтальные полосы прокрутки.
  this.flakeRightOffset = 0;    // Область правого края / желоба на краю контейнера
  this.flakeWidth = 8;          // Максимальная ширина пикселей, зарезервированная для элемента снега
  this.flakeHeight = 8;         // Макс. Высота пикселей для снежного элемента
  this.vMaxX = 5;               // Максимальный диапазон скоростей X для снега
  this.vMaxY = 4;               // Максимальный диапазон скоростей Y для снега
  this.zIndex = 0;              // Порядок укладки CSS, применяемый к каждой снежинке

к содержанию ↑

Методы

Скрипт имеет базовые методы работы.

snowStorm.randomizeWind()

Устанавливает скорость ветра со случайным значением относительно свойств vMaxX и vMaxY.

snowStorm.freeze()

Замораживает эффект снега

snowStorm.resume()

Выводит из заморозки

snowStorm.toggleSnow()

Включает или отключает эффект снега в зависимости от состояния, аналогично вызову freeze () или resume ().

snowStorm.stop()

Замораживает и убивает эффект метели и удаляет связанные обработчики событий. Snowstorm не будет работать должным образом, если другие вызовы вызываются после остановки ().

к содержанию ↑

Скачать

к содержанию ↑

Рекомендую

Вам почитать статью «Разработка бота телеграмм». https://for24.ru/bot/telegram/

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)