Снег с помощью CSS3 анимации

Снег с помощью CSS3 анимации

02015-12-23653619Денис Абдуллин

Есть множество скриптов на тематику нового года, в частности скрипты имитации снега на вашем сайте, но в чем отличия именно этого скрипта я вам сейчас расскажу. Во-первых, это вовсе не скрипт, он не использует никаких дополнительных JavaScript или JQuery, сделан исключительно с помощью CSS3 анимации. Скриптом мы с натяжкой его можем назвать только из-за прописанного сценария для анимации. Минусом его конечно является то, что он использует три картинки снега. Если говорить точнее, то на каждой картинке снежинки имеют разный размер и степень размытия. Это сделано для придания глубины картинке, или как модно сегодня говорить, «параллакс» эффекта.

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


Принцип работы и установка

Сначала нужно объяснить принцип, но не будем вдаваться в такие подробности, как создавать анимацию на CSS3, это вовсе не урок. Изначально это был блок со снегопадом фиксированной ширины, но это не целесообразно.

Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top, внутри него поместим HTML-код снегопада (он ниже), т.е. между <div class="top"> и </div>:

Принцип работы снегопада CSS3

Чтобы снег был именно в этом блоке, нужно к блоку .top прописать position:relative, вот так:

Код
.top {position: relative;}


Непосредственно установка

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

Код
.snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
#snow {width: 100%; height: 100%; background-image: url("https://yraaa.ru/_pu/27/15825154.png"), url("https://yraaa.ru/_pu/27/89961317.png"), url("https://yraaa.ru/_pu/27/21791255.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;}}

И далее вставим небольшой HTML код снегопада. Выберите именно тот блок, в котором должен идти снег.

Код
<div class="snowContainer">
<div id="snow"></div>
</div>

Посколько снегопад на CSS3 представляет собой несколько слоев, которые просто ложатся на блок, может случиться ситуация, при которой элементы в самом блоке не смогут выполнять функции. Если такое случилось, поэксперементируйте с z-index.


Демо


uCoz

Ну вот и все. Если у вас есть вопросы пишите в комментариях, будем решать их вместе. Еще зима не началась, а уже с наступающим!


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (19)
Денис Минов 2015-11-25 в 13:23Спам
Почему без демо? :(
0
Денис Абдуллин 2015-11-25 в 13:29
Ладно, так и быть.
0
Aлексей Дьяков 2015-11-25 в 17:11Спам
минус данного снега, в том что меню и реклама гугл ( или еще какая-то либо реклама) становится попросту некликабельными, так как снег идет видмо поверх страницы и поэтому не кликается нигде в итоге)
0
Cry Deil 2015-11-25 в 17:44Спам
Поможет с этим это:
-webkit-pointer-events: none;
pointer-events: none;
2
Серёжа 2015-12-02 в 01:16Спам
ребят, поставил снег на сайт по инструкций, снег пошел а задняя картинка пропала. Что делать?
0
Ivan Typusyak 2015-12-06 в 19:41Спам
а как установить?
0
Вячеслав Лупанов 2015-12-13 в 20:31Спам
Все написано в описании.
0
Dimas 2015-12-11 в 11:52Спам
А как в баре сделать, что бы там шел снег?!
0
Dimas 2015-12-11 в 12:19Спам
уже сам разобрался)
1
tolik bazrov 2015-12-16 в 17:15Спам
.top {position: relative;} НЕ ПОНЯЛ ВАЩЕ
0
Виктор Ведерников 2015-12-21 в 01:56Спам
Вот это куда вставлять? -webkit-pointer-events: none;
pointer-events: none;
0
Cry Deil 2015-12-21 в 19:32Спам
в класс .snowContainer добавьте
0
Сергей Олегович 2015-12-22 в 04:54Спам
Спасибо, очень хороший скрипт!
1
Дмитрий Пуйдак 2016-01-03 в 13:03Спам
Как сделать на весь сайт? А то я вставил в верхнюю часть сайта, снег падает только до середины и обрезается, как сделать чтобы до конца страницы падал?
0
Дмитрий Пуйдак 2016-01-03 в 15:13Спам
Из - за снега пол сайта не нажимается, как сделать чтобы можно было сквозь него нажимать кнопки, которые он покрывает? Как сделать его "прозрачным"
0
Дмитрий Пуйдак 2016-01-03 в 15:24Спам
Админ помоги, куда вставлять -webkit-pointer-events: none;
pointer-events: none;
По рекомендации в комментариях вставил вместо snowContainer - все вообще исчезло, жду твоего ответа
0
Денис Минов 2016-09-10 в 20:31Спам
-webkit-pointer-events: none; и pointer-events: none; нужно ДОБАВИТЬ к классу snowContainer, а не заменить там всё.
0
Киселёв Александр 2016-03-09 в 17:43Спам
а можно ли переделать под дождик????
0
Денис Минов 2016-09-10 в 20:30Спам
Можно, но нужно будет сделать анимацию побыстрее и "капли" сделать.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.