Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3
До зимы осталось совсем немного времени, и большое количество вебмастеров начинают создавать должную атмосферу на своих сайтах. По такому поводу представляем нашу подборку эффектов снега для вашего сайта.
jSnow – универсальный скрипт падающего снега на jQuery
Начнем мы нашу подборку с очень красивого эффекта снега, который добавляется на сайт посредством плагина под названием «jSnow».
Демонстрация:
Согласитесь – красиво!
Для того, чтобы установить этот эффект к себе на сайт, сделайте следующее.
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:["•"] // Вид снежинки
});
});
</script>В этом коде настраивается размер снежинок, высота занимаемой ими области, цвет и другие прокомментированные параметры.
Скрипт, как вы понимаете, универсальный, и вместо круглого снега вы можете добавить звезды, например, так:
flakeCode:["*"] // Вид снежинкиИли же связку круглого снега и звезд:
flakeCode:["•", "*"] // Вид снежинкиА также любой другой символ (и даже знак доллара – $).
Скрипт отлично подходит для оформления верха сайта, не перекрывая при этом основной контент.
Snowstorm – умный скрипт падающего снега на JavaScript
Почему умный, спросите вы? Потому что в этом скрипте (в отличие от других рассмотренных в данной статье) присутствует дополнительный эффект отталкивания снежинок. То есть при перемещении курсора мыши на вашем сайте снежинки устремляются в противоположную сторону от него. Чем дальше курсор от середины экрана – тем быстрее скорость движения снежинок.
Демонстрация:
Чтобы установить этот эффект на свой сайт, не требуется дополнительных библиотек. Все, что вам нужно сделать, это:
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 = "•"; // Вид снежинки
};
</script>По необходимости вносите изменения в анимацию скрипта.
Помимо того, что снежинки отталкиваются от курсора, часть из них прилипает к низу экрана, создавая небольшое впечатление формирования снежинками сугроба.
Snowfall – эффект падающего снега с сугробами на jQuery
Этот скрипт мне нравится больше всех, ведь он реализует мелкую снежную крупу, а также собирает на указанных элементах небольшие сугробы.
Демонстрация:
Установка этого эффекта немного дольше остальных.
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.
Демонстрация:
Волшебно, не так ли?
Для того, что бы установить к себе этот эффект, сделайте три несложных шага.
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>После чего сохраните все изменения.
Вот такая хорошая подборка эффектов снега, которая, без сомнения, порадует посетителей вашего сайта.
