Мощные VPS/VDS-сервера на новейшем поколении процессоров Intel от 210 ₽ в месяц   •   Реклама
Артём Мáлков

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

25 ноя25 комм

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

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
Скачать с сервера
25
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    2
      •  Пользователь
    4 мая в 16:17

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

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

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

      • 0
      993
        •  Команда Pandoge
      5 мая в 12:47

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

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

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

      • 0
      993
        •  Команда 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

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

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

      • 0
      993
        •  Команда Pandoge
      21 дек в 01:36

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

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

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

      замените на:

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

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

      • 1
      993
        •  Команда Pandoge
      15 дек в 13:55

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

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

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

      поменять на:

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

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

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

      • 0
      993
        •  Команда Pandoge
      3 дек в 19:06

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

      • 0
      21
        •  Проверенный
      3 дек в 22:55

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

      • 0
      993
        •  Команда Pandoge
      9 дек в 11:05

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

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

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

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

    Помогите!)

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

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

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

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

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

      • 2
      993
        •  Команда Pandoge
      4 дек в 01:25

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

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

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

      • 0
      993
        •  Команда Pandoge
      8 дек в 04:08

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

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

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

      • 0
      993
        •  Команда Pandoge
      8 дек в 16:00

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

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

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

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

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

      • 0
      993
        •  Команда 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>
      • 1
      5
        •  Проверенный
      10 дек в 22:03

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

      • 0
      993
        •  Команда Pandoge
      11 дек в 00:01

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

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