Падающий снег на 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 я получил снег только в верхней части своего сайта, смотрится тоже оригинально и не мешает просмотру. Но так как не охота было возиться с изменением цвета в картинках ( так как снег почти не заметен был) . Я установил его в левый блок с меню , тоже получилось оригинально.
Если возникнут какие проблемы обращайтесь с радостью помогу.
Всех с Наступающим!!!
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.