Снег с помощью CSS3 анимации
827материалов
228тем на форуме
3003комментария
6152пользователя

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


Введение:

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

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

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

Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top, внутри него поместим HTML-код снегопада (он ниже), т.е. между <div class="top"> и </div>:
Код
<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("http://webmaster-ucoz.ru/ucoz/1/sneg/Sneg-New-Year-2016.png"), url("http://webmaster-ucoz.ru/ucoz/1/sneg/sneg-new-year-2016.png"), url("http://webmaster-ucoz.ru/ucoz/1/sneg/Sneg-new-year-2016.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;}}
.snowContainer {-webkit-pointer-events: none; pointer-events: none;}

И далее вставим небольшой HTML код снегопада. Выберите именно тот блок, в котором должен идти снег.
Код
<div class="snowContainer">
<div id="snow"></div>
</div>

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

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 22.12.2015 в 07:00
Материал просмотрен: 1390 раз
Категория материала: Новогодние скрипты
К материалу оставлен: 21 комментарий

Пожаловаться
Сказать спасибо
Источник

21 комментарий


StimuL
Геннадий @StimuL 02.12.2015 16:272
+1
на весь сайт можно сделать?
StimuL
Геннадий @StimuL 03.12.2015 16:199
+1
пробовал не получилось, подсказать сможешь как это можно реализовать?
Ромчик
В нижнюю часть
Код
<div class="snowContainer">  
<div id="snow"></div>  
</div>
StimuL
Геннадий @StimuL 03.12.2015 16:2311
+1
не катит тык
Ромчик
В смысле ни как? у Вас на всем сайте идет снег http://f5.s.qip.ru/19yBhtbtk.png
StimuL
Геннадий @StimuL 03.12.2015 16:3513
0
а у меня так отображает http://shot.qip.ru/00OOgC-4sGa1lysq/
Ромчик
По идеи, это снег, изначально, создавался для каких-то элементов на сайте, а не для полной страницы. Если Вам нужно для полной страницы, воспользуйтесь одни из вариантов этого снега http://webmaster-ucoz.ru/christmas/sneg
StimuL
Геннадий @StimuL 03.12.2015 16:4615
0
они мне не подходят из флеша проигрывателя) ладно и за это спасибо)
Ромчик
Воспользуйтесь поиском, в интернете очень много разновидностей снега
StimuL
Геннадий @StimuL 03.12.2015 16:4917
0
искал не нашел более подходящий))
Ромчик
Попробуй тогда .top {position: relative;} заменить на .top {position: absolute;}
AlexGraur
Alex Graur @AlexGraur 02.12.2015 20:303
+1
вначале поставил код работал, где то часа 2, а потом попросту перестал снег идти laughing бред конечно, но не срабатывает нигде теперь
Ромчик
Скорее всего вы установили еще какой-то скрипт и из-за этого происходит конфликт
Kosten
Kocsten @Kosten 03.12.2015 13:334
+1
Отличное решение, что только в вверх сайта в шапке идет снег, а не на весь ресурс.
Ромчик
Снег можно применить к чему угодно, хоть текст снегом засыпать можно
Adolf-Gitler
Спасибо, очень классный снег
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта