Артём Мáлков

Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3

25 ноя39 комм

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

jSnow – универсальный скрипт падающего снега на jQuery

Начнем мы нашу подборку с очень красивого эффекта снега, который добавляется на сайт посредством плагина под названием «jSnow».

Демонстрация:

Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3

Согласитесь – красиво!

Для того, чтобы установить этот эффект к себе на сайт, сделайте следующее.

1. Скачайте архив jsnow.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или другим удобным для вас способом.

2. Далее в секцию HEAD вы подключаете библиотеку jQuery:

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

К сожалению, с новыми версиями jQuery скрипт не работает, так что довольствуемся тем, что есть.

3. Перед закрывающим тегом </body> подключаете скрипты:

<script src="/snow/jSnow.js"></script>

<script>

	$(document).ready(function() {

		$("body").jSnow({
			vSize: 100, // Размер области
			flakes: 30, // Количество снежинок
			flakeColor: ["#fff"], // Цвет
			flakeMinSize: 10, // Минимальный размер снежинки
			flakeMaxSize: 20, // Максимальный размер снежинки
			fallingSpeedMin: 1, // Минимальная скорость снежинки
			fallingSpeedMax: 2, // Максимальная скорость снежинки
			flakeCode:["&bull;"] // Вид снежинки
		});

	});

</script>

В этом коде настраивается размер снежинок, высота занимаемой ими области, цвет и другие прокомментированные параметры.

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

flakeCode:["*"] // Вид снежинки

Или же связку круглого снега и звезд:

flakeCode:["&bull;", "*"] // Вид снежинки

А также любой другой символ (и даже знак доллара – $).

Скрипт отлично подходит для оформления верха сайта, не перекрывая при этом основной контент.

Snowstorm – умный скрипт падающего снега на JavaScript

Почему умный, спросите вы? Потому что в этом скрипте (в отличие от других рассмотренных в данной статье) присутствует дополнительный эффект отталкивания снежинок. То есть при перемещении курсора мыши на вашем сайте снежинки устремляются в противоположную сторону от него. Чем дальше курсор от середины экрана – тем быстрее скорость движения снежинок.

Демонстрация:

Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3

Чтобы установить этот эффект на свой сайт, не требуется дополнительных библиотек. Все, что вам нужно сделать, это:

1. Скачать архив snowstorm.zip в конце статьи. Разархивировать и содержимое загрузить на ваш сайт удобным для вас способом.

2. Далее перед закрывающим тегом </body> вы подключаете следующие скрипты:

<script src="/snow/snowstorm-min.js"></script>

<script>

	window.onload = function() {

		snowStorm.snowColor = "#fff"; // Цвет снежинок
		snowStorm.flakesMaxActive = 100; // Максимальное количество видимых снежинок
		snowStorm.followMouse = true; // true - гоняться за курсором, false - нет
		snowStorm.snowCharacter = "&bull;"; // Вид снежинки

	};

</script>

По необходимости вносите изменения в анимацию скрипта.

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

Snowfall – эффект падающего снега с сугробами на jQuery

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

Демонстрация:

Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3

Установка этого эффекта немного дольше остальных.

1. Если на вашем сайте отсутствует библиотека jQuery, подключите ее в секцию HEAD:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2. Далее скачайте архив snowfall.zip в конце статьи. Разархивируйте и загрузите содержимое на сайт.

3. Перед закрывающим тегом </body> подключите скрипты:

<script src="/snow/snowfall.jquery.min.js"></script>

<script>

	$(document).ready(function() {

		$(document).snowfall({
			collection: ".collectonme",
			flakeCount: 200 // Количество снежинок
		});

	});

</script>

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

class="collectonme"

Если вы не хотите формирования сугробов на сайте – удалите из скрипта строчку:

collection: ".collectonme",

Это обязательное действие, иначе снег на вашем сайте не будет падать.

Отличный скрипт, именно его мы раньше использовали на своем сайте.

Плавный многоуровневый эффект падающего снега на CSS3

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

Демонстрация:

Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3

Волшебно, не так ли?

Для того, что бы установить к себе этот эффект, сделайте три несложных шага.

1. Скачайте архив snow_img.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или через файловый менеджер хостинга.

2. В ваш файл стилей вставьте (желательно в самый низ):

.snowContainer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
	z-index: -1;
}

#snow {
	width: 100%;
	height: 100%;
	background-image: url("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png");
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

@keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px;
	}
	100% {
		background-position: 500px 1000px, 400px 400px, 300px 300px;
	}
}

@-moz-keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px;
	}
	100% {
		background-position: 500px 1000px, 400px 400px, 300px 300px;
	}
}

@-webkit-keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px;
	}
	100% {
		background-position: 500px 1000px, 400px 400px, 300px 300px;
	}
}

@-ms-keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px;
	}
	100% {
		background-position: 500px 1000px, 400px 400px, 300px 300px;
	}
}

Обязательно проставьте корректную ссылку до изображений.

3. Далее перед закрывающим тегом </body> вставьте теги:

<div class="snowContainer">
	
	<div id="snow"></div>
	
</div>

После чего сохраните все изменения.

Вот такая хорошая подборка эффектов снега, которая, без сомнения, порадует посетителей вашего сайта.

Файл
Размер
Ссылка
jsnow.zip
1,54 Kb
Скачать с сервера
snowstorm.zip
3,69 Kb
Скачать с сервера
snowfall.zip
2,06 Kb
Скачать с сервера
snow_img.zip
14,71 Kb
Скачать с сервера
Рекомендуем к просмотру
jQuery PointPoint – плагин, позволяющий сделать акцент на элементе
Модули и скрипты
Увеличение изображения с эффектом лупы на jQuery
Модули и скрипты
Кроссбраузерная стилизация полосы прокрутки (ScrollBar) на jQuery
Модули и скрипты
39
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    1
      •  Пользователь
    19 дек в 21:22

    Использую "Плавный многоуровневый эффект падающего снега на CSS3"

    1. Снег идет не на всем сайте.

    2. Перекрывает кнопки и кликабельные ссылки

    Почему значение z-index: -1 ? Я поставил вперед всех блоков и у меня получилось значение 4.

      • 0
      1065
        •  Команда Pandoge
      20 дек в 09:45

      Gam, здравствуйте!

      z-index: -1

      чтобы снег не перекрывал элементы. Он больше всего подходит для фона.

    • 2
    5
      •  Проверенный
    19 ноя в 18:40

    Здравствуйте, снег летит под блоками как исправить?

      • 1
      1065
        •  Команда Pandoge
      20 ноя в 10:37

      Дмитрий Соболев, здравствуйте!

      Подскажите, на каком сайте?

      • 0
      5
        •  Проверенный
      17 дек в 23:16

      Артём Мáлков, me.mbx.su

      • 0
      5
        •  Проверенный
      17 дек в 23:19

      Артём Мáлков, И еще снежинки расположены не на всю длину страницы!

      • 0
      1065
        •  Команда Pandoge
      изменено 19 дек в 10:33

      Дмитрий Соболев, чтобы снежинки были на всю высоту, в классе .snowContainer свойство:

      position: absolute;

      замените на:

      position: fixed;

      Что касается "под блоками" - это нормальное поведение для данного вида снежинок. Суть в том, что снежинки здесь - это три изображения. Если их поставить поверх всех блоков, то у вас не будут открываться ссылки, выделяться текст и прочее, так как таким образом вы перекроете интерактивные элементы сайта.

      Варианта здесь два: выбрать другое украшение, либо сделать блоки с тёмным фоном немного прозрачным.

      На примере главной страницы, блок "Фильмы", это можно сделать следующим образом.

      В файле /templates/mbox-blue/css/styles.css у класса .sect-bg свойство:

      background-color: #0c101b;

      замените, например, на:

      background-color: rgba(12, 16, 27, .8);
      • 0
      5
        •  Проверенный
      19 дек в 15:03

      Здравствуйте, Артём Мáлков! Выбрал другое украшение, самое первое. Но оно не работает!

      • 0
      1065
        •  Команда Pandoge
      19 дек в 15:22

      Дмитрий Соболев, здравствуйте!

      У вас какая-то ошибка в скрипте /templates/mbox-blue/lazydev/dle_search/assets/dle_search.js

      Исправьте её (либо уберите скрипт) и снежинки должны появиться

      • 0
      5
        •  Проверенный
      19 дек в 15:34

      Артём Мáлков, Убрал скрипт. Но ничего по прежнему не работает!

      Ошибка в консоли:

      Uncaught TypeError: $(...).jSnow is not a function

      at HTMLDocument.<anonymous> ((индекс):78:13)

      at Function.ready (jquery-1.4.2.min.js:26:289)

      at HTMLDocument.L (jquery-1.4.2.min.js:33:151)

      (анонимная) @ (индекс):78

      ready @ jquery-1.4.2.min.js:26

      L @ jquery-1.4.2.min.js:33

      • 0
      1065
        •  Команда Pandoge
      19 дек в 16:05

      Дмитрий Соболев, полагаю, конфликт jQuery - https://www.pandoge.com/stati-i-sovety/kak-ispolzovat-dve-i-bolee-bibliotek-jquery-na-sayte

      В вашем случае, сразу после:

      <script src="https://code.jquery.com/jquery-1.4.2.min.js"></script>

      добавляем:

      <script>
      
      	var jq_142 = jQuery.noConflict();
      	
      </script>

      И далее оборачиваем скрипт вызова:

      <script>
          
      	(function($) {
            
      		$(document).ready(function() {
      
      			$("body").jSnow({
      				vSize: 100, // Размер области
      				flakes: 30, // Количество снежинок
      				flakeColor: ["#fff"], // Цвет
      				flakeMinSize: 10, // Минимальный размер снежинки
      				flakeMaxSize: 20, // Максимальный размер снежинки
      				fallingSpeedMin: 1, // Минимальная скорость снежинки
      				fallingSpeedMax: 2, // Максимальная скорость снежинки
      				flakeCode:["•"] // Вид снежинки
      			});
      
      		});
            
      	})(jq_142);
          
      </script>
    • 2
    2
      •  Пользователь
    4 мая в 16:17

    Здравствуйте. У меня вопрос по поводу 3-го сценария Snowfall. У меня не образуются сугробы. Стоит раскомментировать строку collection: ".collectonme", то всё замирает. Задавал элементам сайта class="collectonme". Но сугробы так и не образуются, снегопад при этом замирает. Если мы задаём элементу какой-либо класс, разве он не должен быть где-то описан? Где в данном случае описан класс collectonme?

      • 4
      2
        •  Пользователь
      5 мая в 08:15

      Всё в порядке, разобрался. Скрипт работает!

      • 2
      1065
        •  Команда Pandoge
      5 мая в 12:47

      Марат Хафизов, здравствуйте! Опередили. Хорошо smiley

      • 0
      1
        •  Пользователь
      15 дек в 16:13

      Марат Хафизов, Как вы это сделали?

      • 0
      1065
        •  Команда Pandoge
      19 дек в 10:03

      Сергей Сергеевич Колев, здравствуйте!

      Подскажите адрес сайта, где не получается установить скрипт

    • 1
    2
      •  Пользователь
    18 дек в 23:40

    Здравствуйте, подскажите, пожалуйста, в чем ошибка? https://yapx.ru/v/PqBgr Не работает скрипт первый.

      • 1
      1065
        •  Команда Pandoge
      18 дек в 23:55

      Sergey Wave, здравствуйте! Возможно конфликт библиотек jQ. Удалите на время строку:

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

      Если заработает, то - https://www.pandoge.com/stati-i-sovety/kak-ispolzovat-dve-i-bolee-bibliotek-jquery-na-sayte

      • 1
      2
        •  Пользователь
      19 дек в 19:56

      Артём Мáлков, спасибо! Получилось, но возникла проблема - снег не летит поверх background-color, img, слайдеров. Что-то не так сделал?

      • 1
      1065
        •  Команда Pandoge
      21 дек в 01:36

      Sergey Wave, многовато снежинок выставили,у меня притормаживает сайт.

      Что касается позиции снега, строку:

      flakeCode: ["•"] // Вид снежинки

      замените на:

      flakeCode: ["•"], // Вид снежинки
      zIndex: 5 // Положение снежинок
    • 1
    1
      •  Пользователь
    15 дек в 11:14

    И у нас не работает: https://clck.ru/ZLSu2 Не подскажете, что не так?

      • 2
      1065
        •  Команда Pandoge
      15 дек в 13:55

      Виктория, здравствуйте!

      Попробуйте ссылку:

      http://code.jquery.com/jquery-1.4.2.min.js

      поменять на:

      https://code.jquery.com/jquery-1.4.2.min.js
    • 2
    30
      •  Проверенный
    2 дек в 23:34

    Отличная статья!

    Все работает)

      • 1
      1065
        •  Команда Pandoge
      3 дек в 19:06

      Sergey, рад, что нашли что-то полезное для себя на страницах Pandoge angel

      • 2
      30
        •  Проверенный
      3 дек в 22:55

      Артём Мáлков, А есть ли еще красивые оформления для сайта?

      • 1
      1065
        •  Команда Pandoge
      9 дек в 11:05

      Sergey, из простого есть такое - https://www.pandoge.com/stati-i-sovety/novogodnyaya-shapka-na-schetchik-ili-drugoy-element-sayta-na-htmlcss

    • 1
    1
      •  Пользователь
    30 ноя в 21:25

    Привет! Я графический дизайнер, который раньше не занимался подобной историей. Просветите плиз!

    Делаю сайт на Тильде. Какие манипуляции мне нужно сделать, чтобы получить "Snowstorm – умный скрипт падающего снега на JavaScript". Я не понимаю где мне взять html код, где находится "body"? Как его создать этот код? Я только лишь знаю как его вставить полностью...

    Помогите!)

      • 2
      1065
        •  Команда Pandoge
      2 дек в 00:30

      Oksana Zt, здравствуйте!

      На вашем сайте есть возможность вставлять свой код?

      • 1
      1
        •  Пользователь
      6 дек в 07:11

      Oksana Zt, скачиваете архив, вытаскиваете файл js, заливаете его на любой обменник, дающий прямую ссылку.

      На странице в самом низу создаете блок html, туда копируете то, что в п2, но путь к файлу прописываете полный, полученный от обменника.

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

    • 2
    5
      •  Проверенный
    3 дек в 22:45

    Все сделал как на первом примере, но все равно нет снега. Что делать?

      • 3
      1065
        •  Команда Pandoge
      4 дек в 01:25

      Сергей Федоров, покажите пожалуйста сайт, где размещен скрипт.

      • 1
      5
        •  Проверенный
      7 дек в 18:13

      Артём Мáлков, http://ggggggtttt.zzz.com.ua/index.html , вот.

      • 1
      1065
        •  Команда Pandoge
      8 дек в 04:08

      Сергей Федоров, у Вас по пути http://ggggggtttt.zzz.com.ua/script/jSnow.js нет описанного в статье скрипта.

      • 1
      5
        •  Проверенный
      8 дек в 11:47

      Артём Мáлков, как же нету вот https://yapx.ru/u/F4Uj0

      • 1
      1065
        •  Команда Pandoge
      8 дек в 16:00

      Сергей Федоров, а так нету.

      В коде у Вас указана папка script, а скрипт лежит в папке scripts.

      Это существенная разница.

      • 2
      5
        •  Проверенный
      9 дек в 19:44

      Вот, исправил. Но все равно нет снега. https://yapx.ru/u/F5F8T

      • 1
      1065
        •  Команда Pandoge
      10 дек в 00:24

      Сергей Федоров, скрипт:

      <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

      переместите туда, где у Вас прописан скрипт снега, чтобы в итоге стало:

      <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
      <script src="/scripts/jSnow.js"></script>
      
      <script>
      
      	$(document).ready(function() {
      
      		$("body").jSnow({
      			vSize: 100, // Размер области
      			flakes: 30, // Количество снежинок
      			flakeColor: ["#fff"], // Цвет
      			flakeMinSize: 10, // Минимальный размер снежинки
      			flakeMaxSize: 20, // Максимальный размер снежинки
      			fallingSpeedMin: 1, // Минимальная скорость снежинки
      			fallingSpeedMax: 2, // Максимальная скорость снежинки
      			flakeCode:["*"] // Вид снежинки
      		});
      
      	});
      
      </script>
      • 2
      5
        •  Проверенный
      10 дек в 22:03

      Получилось, а как сделать чтобы он по всей странице шел?

      • 1
      1065
        •  Команда Pandoge
      11 дек в 00:01

      Сергей Федоров, поиграйте с параметром:

      vSize: 100, // Размер области
Подняться наверх
«Pandoge» - помощник вебмастера