Inter-Net.PRO

снег на сайте  Продолжая зимнюю тематику, хочу поделиться тем, как можно реализовать на сайте такую штуку как падающий снег.

  Данный эффект сделан на CSS, что в отличии от JavaScript не создаёт нагрузок на браузер посетителя сайта.

  Реализовать можно на любом сайте независимо от его CMS (движка).

 


 CSS падающий снег для сайта

   Думаю что долго со вступлением затягивать не нужно и сразу перейдём к демо:

А у нас зима!

 

  Ну как? Нормально?


  Реализация самая простая - три изображения и небольшой код CSS.

 

CSS код:

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('img/snow.png'), url('img/snow3.png'), url('img/snow2.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;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

 

  Добавьте этот код в основной css файл вашего сайта.

  В коде главное правильно указать пути к изображениям в свойстве background-image у класса body.

  Укажите пути к изображениям так, как они лежат у вас на сайте.


Изображения снега

  Чтобы скачать изображения снега, нажмите на кнопку ниже:

Скачать

  Скачанный архив распакуйте и из папки img залейте все три изображения к себе на сайт.

 

Авторизация

Войти через соцсети: