"Помощь в развитии Сайта"     "Торрент- трекер от Наших сайтов"     "Архив сайта"

Выбрать дизайн:
Страница 1 из 11
Модератор форума: XemorDio 
Форум » Для вебмастеров » Графика для сайта » Скрипты сталкер для Ucoz » Снег с помощью CSS3 анимации
Снег с помощью CSS3 анимации
XemorDio Дата: Чт, 08.12.2016, 17:51:43 | Сообщение # 1

Наставник
В Зоне Реактора с 25.09.2013
Сообщений: 218
Заслуги в Зоне Реактора
За 200 Сообщений

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

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

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

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


Чтобы снег был именно в этом блоке, нужно к блоку .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://yraaa.ru/_pu/27/15825154.png"), url("http://yraaa.ru/_pu/27/89961317.png"), url("http://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 » Снег с помощью CSS3 анимации
Страница 1 из 11
Поиск:

Сегодня в Баре - Реактор

Кто был:
Легенда условных обозначений : Призрак, Администратор, Модератор, Проводник, Сталкеры, Чистое небо, Тёмные, Свобода, Наёмники, Нейтралы, Военные, Долг, Монолит, Заблокированные .

Последние сообщения:

Чат

Активисты Форума:

Нужные темы:


Radio Унесённых Сталкером
CMIT               (03.04.2016)
kapa               (09.01.2014)
Dimon02022               (08.11.2011)
Strelok               (01.11.2014)
ULTRA               (04.09.2015)
tyman21               (09.11.2013)
Этот               (01.08.2015)
garwas               (12.11.2011)
WULF               (22.10.2015)

Пришедшие в Бар:


Скиппер               (24.04.2017)
Кэрэл               (23.04.2017)
Aнtoнколий               (21.04.2017)
Анталькон               (21.04.2017)
Лисья_Морда               (21.04.2017)
Gelezo19               (19.04.2017)
Рейтинг@Mail.ru Этот сайт защищен «Site Guard» Яндекс.Метрика