В канун новогодних праздников практически каждый сайт украшают атрибутами главного праздника года. Кто-то делает гирлянды, кто-то анимированный снег, кто-то елки в подвал помещает. Сейчас попробую объяснить как сделать красивый, на мой взгляд, и анимированный баннер на сайт с помощью CSS3.
Основная структура баннера будет содержаться в достаточно компактной html'ке.
<div class="header">
<h1>С наступающими праздниками!</h1>
<div class="wrapper">
<div class="christmas-tree tree1"></div>
<div class="christmas-tree tree2"></div>
<div class="christmas-tree tree3"></div>
<div class="snowman"></div>
<div class="christmas-tree tree4"></div>
<div class="christmas-tree tree5"></div>
<div class="christmas-tree tree6"></div>
</div>
<div class="layer-snow"></div>
</div>
Я думаю из имен классов понятно, что на страничке мы увидим поздравление, 6 елок и снеговика, а как они выглядят, описываем в css.
Для надписи «С наступающими праздниками!» я подключил шрифт из Google Fonts и прописал font-family для тега H1.
<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
h1{
color: white;
text-align: center;
position: absolute;
top: 10px;
left: 0;
right: 0;
font-family: 'Marck Script', cursive;
font-size: 3em;
}
Классы tree1, ..., tree6 между собой отличаются лишь позиционированием, в качестве фона используют одну и то же изображение в файле christmas-tree. Аналогичным образом сделан и наш снеговик. Необходимый фон, так же лежит в нескольких файлах.
Итак, фон есть, елки есть, снеговик на месте. Нам не хватает только снегопада. За основу анимации снегопада я взял статью упомянутую раньше. Основные фреймы анимации приведены ниже.
.header{
margin: 0 0 30px;
position: relative;
background-image: url(../img/snow3.png), url(../img/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px;}
100% {background-position: 400px 400px, 300px 300px;}
}
.layer-snow{
background-image: url(../img/snow.png);
-webkit-animation: snow-layer 30s linear infinite;
-moz-animation: snow-layer 30s linear infinite;
animation: snow-layer 30s linear infinite;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 315px;
}
@keyframes snow-layer {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px;}
}
Для снега 2 анимации, одна из них это за основной картинкой (сугробы, снеговик, елки), другая перед.
Остается добавить эффектную загрузку нашего баннера, пожалуй «свалиться» с неба будет просто и со вкусом.
.snowman {
width: 78px;
height: 105px;
top: 195px;
left: 445px;
background: url(../img/snowman.png);
-moz-animation-duration: .6s;
-webkit-animation-duration: .6s;
animation-duration: .6s;
}
@keyframes animate-drop {
0% {opacity:0;transform: translate(0, -315px);}
100% {opacity:1;transform: translate(0, 0);}
}
Вроде бы ничего не забыл, демонстрацию можно просмотреть, там же можно скачать исходники. Собственно говоря в качестве вдохновения использовал эту статью. Баннер к сожалению не работает в IE и Opera, от последней ничего не смог добиться, IE в принципе не поддерживает keyframes (10 версия поддерживает, но под нее не делал и не тестировал), заработало еще и на android, правда медленно… кадров 5-7 в секунду, думаю из-за наложения нескольких картинок с анимацией.