Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3
До зимы осталось совсем немного времени, и большое количество вебмастеров начинают создавать должную атмосферу на своих сайтах. По такому поводу представляем нашу подборку эффектов снега для вашего сайта.
jSnow – универсальный скрипт падающего снега на jQuery
Начнем мы нашу подборку с очень красивого эффекта снега, который добавляется на сайт посредством плагина под названием «jSnow».
Для того, чтобы установить этот эффект к себе на сайт, сделайте следующее.
1. Скачайте архив jsnow.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или другим удобным для вас способом.
2. Далее в секцию HEAD вы подключаете библиотеку jQuery:
К сожалению, с новыми версиями jQuery скрипт не работает, так что довольствуемся тем, что есть.
3.Перед закрывающим тегом подключаете скрипты:
В этом коде настраивается размер снежинок, высота занимаемой ими области, цвет и другие прокомментированные параметры.
Скрипт, как вы понимаете, универсальный, и вместо круглого снега вы можете добавить звезды, например, так:
Или же связку круглого снега и звезд:
А также любой другой символ (и даже знак доллара – $).
Скрипт отлично подходит для оформления верха сайта, не перекрывая при этом основной контент.
Snowstorm – умный скрипт падающего снега на JavaScript
Почему умный, спросите вы? Потому что в этом скрипте (в отличие от других рассмотренных в данной статье) присутствует дополнительный эффект отталкивания снежинок. То есть при перемещении курсора мыши на вашем сайте снежинки устремляются в противоположную сторону от него. Чем дальше курсор от середины экрана – тем быстрее скорость движения снежинок.
Чтобы установить этот эффект на свой сайт, не требуется дополнительных библиотек. Все, что вам нужно сделать, это:
1. Скачать архив snowstorm.zip в конце статьи. Разархивировать и содержимое загрузить на ваш сайт удобным для вас способом.
2. Далее перед закрывающим тегом вы подключаете следующие скрипты:
По необходимости вносите изменения в анимацию скрипта.
Помимо того, что снежинки отталкиваются от курсора, часть из них прилипает к низу экрана, создавая небольшое впечатление формирования снежинками сугроба.
Snowfall – эффект падающего снега с сугробами на jQuery
Этот скрипт мне нравится больше всех, ведь он реализует мелкую снежную крупу, а также собирает на указанных элементах небольшие сугробы.
Установка этого эффекта немного дольше остальных.
1. Если на вашем сайте отсутствует библиотека jQuery, подключите ее в секцию HEAD:
2. Далее скачайте архив snowfall.zip в конце статьи. Разархивируйте и загрузите содержимое на сайт.
3.Перед закрывающим тегом подключите скрипты:
4. И завершающим этапом присвойте класс тем элементам, над которыми должны образовываться сугробы:
Если вы не хотите формирования сугробов на сайте – удалите из скрипта строчку:
Это обязательное действие, иначе снег на вашем сайте не будет падать.
Отличный скрипт, именно его мы раньше использовали на своем сайте.
Плавный многоуровневый эффект падающего снега на CSS3
Здесь, как вы понимаете, мы не будем прибегать к использованию всяческих скриптов, а обойдемся лишь чистым CSS.
Для того, что бы установить к себе этот эффект, сделайте три несложных шага.
1. Скачайте архив snow_img.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или через файловый менеджер хостинга.
2. В ваш файл стилей вставьте (желательно в самый низ):
Эта анимация стала одной из первых, которую я создал с помощью ActionScript в Flash много лет назад. Ниже представлен вариант аналогичного эффекта на HTML, CSS и JavaScript.
В этом руководстве вы узнает, как быстро добавить подобный эффект на свой сайт. А также, как приведенная ниже разметка и код заставляют этот эффект работать.
Добавляем эффект падающего снега
В нижней части страницы (выше закрывающего тега
) добавьте следующий код:
#snowflakeContainer < position: absolute; left: 0px; top: 0px; display: none; >.snowflake // Массив для хранения объектов Snowflake var snowflakes = []; // Глобальные переменные для размера окна браузера var browserWidth; var browserHeight; // Указываем количество снежинок, которые должны быть видимыми var numberOfSnowflakes = 50; // Флаг для сброса положения снежинок var resetPosition = false; // Устанавливаем параметр enableAnimations var enableAnimations = false; var reduceMotionQuery = matchMedia("(prefers-reduced-motion)"); // Изменяем значение enableAnimations function setAccessibilityState() < if (reduceMotionQuery.matches) < enableAnimations = false; >else < enableAnimations = true; >> setAccessibilityState(); reduceMotionQuery.addListener(setAccessibilityState); // // Все начинается здесь. // function setup() < if (enableAnimations) < window.addEventListener("DOMContentLoaded", generateSnowflakes, false); window.addEventListener("resize", setResetFlag, false); >> setup(); // // Конструктор объекта Snowflake // function Snowflake(element, speed, xPos, yPos) < // устанавливаем начальные свойства снежинки this.element = element; this.speed = speed; this.xPos = xPos; this.yPos = yPos; this.scale = 1; // объявляем переменные, используемые для движения снежинки this.counter = 0; this.sign = Math.random() < 0.5 ? 1 : -1; // устанавливаем значения начальной непрозрачности и размера снежинки this.element.style.opacity = (.1 + Math.random()) / 3; >// // Функция, ответственная за перемещение снежинки // Snowflake.prototype.update = function () < // используем тригонометрию, чтобы определить позицию x и y this.counter += this.speed / 5000; this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40; this.yPos += Math.sin(this.counter) / 40 + this.speed / 30; this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20); // устанавливаем позицию снежинки setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element); // если снежинка опустится ниже окна браузера, переместим ее обратно наверх if (this.yPos >browserHeight) < this.yPos = -50; >> // // Эффективный способ установить положение и размер снежинки // function setTransform(xPos, yPos, scale, el) < el.style.transform = `translate3d($px, $px, 0) scale($, $)`; > // // Функция, ответственная за создание снежинки // function generateSnowflakes() < // получаем элемент снежинки из DOM и сохраняем его var originalSnowflake = document.querySelector(".snowflake"); // получаем доступ к контейнеру родителя элемента снежинки var snowflakeContainer = originalSnowflake.parentNode; snowflakeContainer.style.display = "block"; // получаем размер окна браузера browserWidth = document.documentElement.clientWidth; browserHeight = document.documentElement.clientHeight; // создаем снежинку for (var i = 0; i < numberOfSnowflakes; i++) < // клонируем индивидуальную снежинку и добавляем ее в snowflakeContainer var snowflakeClone = originalSnowflake.cloneNode(true); snowflakeContainer.appendChild(snowflakeClone); // устанавливаем начальную позицию и свойства для оригинальной снежинки var initialXPos = getPosition(50, browserWidth); var initialYPos = getPosition(50, browserHeight); var speed = 5 + Math.random() * 40; // создаем объект Snowflake var snowflakeObject = new Snowflake(snowflakeClone, speed, initialXPos, initialYPos); snowflakes.push(snowflakeObject); >// убираем снежинку, так как больше не нужно, чтобы она была видимой snowflakeContainer.removeChild(originalSnowflake); moveSnowflakes(); > // // Отвечает за перемещение каждой снежинки, вызывая функцию обновления // function moveSnowflakes() < if (enableAnimations) < for (var i = 0; i < snowflakes.length; i++) < var snowflake = snowflakes[i]; snowflake.update(); >> // Сбрасывает значения позиций всех снежинок до установки нового значения if (resetPosition) < browserWidth = document.documentElement.clientWidth; browserHeight = document.documentElement.clientHeight; for (var i = 0; i < snowflakes.length; i++) < var snowflake = snowflakes[i]; snowflake.xPos = getPosition(50, browserWidth); snowflake.yPos = getPosition(50, browserHeight); >resetPosition = false; > requestAnimationFrame(moveSnowflakes); > // function getPosition(offset, size) < return Math.round(-1 * offset + Math.random() * (size + 2 * offset)); >// // Сброс позиций всех снежинок // function setResetFlag(e)
После добавления кода проверьте его работоспособность, открыв веб-страницу в браузере. Пример страницы с анимацией .
Цвет нашей снежинки определяется внутри класса .snowflake в CSS:
Измените значение свойства background-color на любой желаемый цвет. В примере установлен #FFFFFF (белый. Если собираетесь использовать этот эффект на более светлом фоне, нужно изменить цвет снежинки на более подходящий.
Чтобы настроить количество снежинок, найдите переменную numberOfSnowflakes в JavaScript-коде:
var numberOfSnowflakes = 50;
Сейчас установлено значение 50. Измените его на большее или меньшее число в зависимости от того, какой эффект вам необходим.
Как работает анимация: обзор кода
Этот эффект работает довольно просто. Позиция и размеры каждой из снежинок (наших элементов) меняются много раз в секунду. Именно эти изменения лежат в основе анимации.
Основа процесса находится в HTML, в котором определен элемент снежинки:
С помощью кода эта единственная снежинка клонируется множеств раз. Количество определяется значением переменной numberOfSnowflakes:
В процессе клонирования снежинок мы вносим незначительные изменения в их внешний вид, чтобы они немного отличались друг от друга:
Here we’re animating two backgrounds of highly compressed images at slightly different speed to create the illusion of depth (otherwise known as a parallax effect), and illustrate a gentle snowfall.
