Сегодня:
главная » Украшения для сайта » Падающий снег на CSS3

Падающий снег на CSS3

Зима, снег , Новый год!!! Как всё это красиво и прекрасно. Я продолжаю пополнять коллекцию новогодних скриптов для сайта.
Немного повозился с украшением для сайта на html  и css. Итог работы Вы можете увидеть в сайдбаре слева. Падающий снег на CSS3, станет отличным дополнением для вашего проекта. В сочетании с гирляндой на css  будет выглядеть офигенно.
Сегодня мы будем украшать проекты на DLE, но , Вы смело можете украсить свой сайт, просто меняем пути к картинке на свои.
И так приступим для того чтобы установить  новогодний скрипт для сайта , а именно плавно падающий снег, в файле стилей шаблона ( не важно какой главное чтобы был подключён к шаблону), для других сайтов в любой файл стилей вставляем следующий код CSS:
/*---снег на css---*/
.snowwContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index: -1;
}

#snoww {
    width: 100%;
    height: 100%;
    background-image: url("../images/snow_1.png"), url("../images/snow_2.png"), url("../images/snow_3.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;
    }
}

 Для DLE путь уже прописан к папке images. Просто кидаем картинки в эту папку.

В main.tpl  (Для других сайтов в index.html) перед закрывающимся тегом body вставляем следующий код: 
<div class="snowwContainer">
    
    <div id="snoww"></div>
    
</div>
 Сохраняем, чистим кеш, радуемся снегу на сайте.

Ошибки бывают разные и не всегда бывает что работает , что то устанавливаемое корректно.
Если не заработал скрипт падающего снега, гляньте через консоль браузера правильно ли прописаны пути, если всё верно поиграйте со свойством z-index просто уберите отрицательный знак.  Многое зависит от вёрстки самого шаблона, к примеру установив после на своём сайте перед закрывающимся тегом body  я получил снег только в верхней части своего сайта, смотрится тоже оригинально и не мешает просмотру. Но так как не охота было возиться с изменением цвета в картинках ( так как снег почти не заметен был) . Я установил его в левый блок с меню , тоже получилось оригинально.
Если возникнут какие проблемы обращайтесь с радостью помогу.

Всех с Наступающим!!!
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+Enter
Коментарии (0)
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.