Снег для Вашего сайта построенный на CSS3

Описание:
Красивый снег для сайта, построенный на CSS3, очень простой и лёгкий в установке. С данным скриптом ваш сайт станет немного красочнее, снег предаст сайту новогодний вид. Данный скрипт не сильно нагружает Ваш сайт, тем самым даёт ему преимущество работать без перебоев и без подтормаживаний Вашего сайта.

Установка:
1. Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top, внутри него поместим HTML-код снегопада:

Код

<div class="top"> содержимое, где будет падать снег </div>

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

Код

.top {position: relative;}

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

Код

.snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
  #snow {width: 100%; height: 100%; background-image: url("/snow/snow.png"), url("/snow/snow_b.png"), url("/snow/snow_c.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;}

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

Код

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

Комментарии

0 комментариев

Материал «Снег для Вашего сайта построенный на CSS3» ещё никто не комментировал.

Для добавления комментариев необходима авторизация.