Новогодний баннер на сайт при помощи CSS3



    В канун новогодних праздников практически каждый сайт украшают атрибутами главного праздника года. Кто-то делает гирлянды, кто-то анимированный снег, кто-то елки в подвал помещает. Сейчас попробую объяснить как сделать красивый, на мой взгляд, и анимированный баннер на сайт с помощью 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 в секунду, думаю из-за наложения нескольких картинок с анимацией.
    Share post

    Similar posts

    Comments 26

      +2
      В опере 11.60 анимации нет :(
      В ФФ 9 есть, но отжирает 50% процессора…
        +1
        Насчет оперы указал в заключении, что не смог добиться. Буду рад услышать варианты решений, хотя бы в какую сторону копать :)
        По поводу ФФ9, не знаю, возможно анимация действительно много съедает ресурсов, хотя тестировал на ФФ8, такой проблемы не увидел.
        0
        На моем компе в хроме 25% загрузка.
          +1
          Наверно у вас 4 ядра, а у первого комментатора 2 ))
          0
          firefox 11a (Aurora) 4-5%
            +1
            скоро баннеры будут пихать через css import? :)
              0
              Ну картинки пихают в сами файлы css. Пример этот datapicker, пусть и всего лишь иконка, но тем не менее. Остается прописать import при необходимых условиях для нас ;)
                0
                а клик реализовать через :before и :after? :)
                  0
                  Можно попробовать через :focus, и главное никакой браузер не скажет, что небезопасный javascript :)
                    –1
                    Тогда уж :active? =)
                      0
                      Можно ссылкой сделать и прописать :target :)
              0
              у меня в хроме Adblock Plus зарезал баннер.
                0
                как сделать как на sberbank.ru?
                  0
                  А там так же несколько слоев использованы для снега, в body основная текстура, есть домолнительная текстура названа в snow-1, а в snow-2 и snow-3 текстуры со снегом, и точно такая же анимация, только сделана с помощью javascript и библиотеки jquery, что даст большую кроссбраузерность и возможно не будет нагрузки на процессор, о которых указано выше
                    +1
                    Лучше так вообще не делать — у них на сайте 5+ флэшек, Java апплет и ещё эта ужасная анимация на фоне, которая всё вешает… Лучше так не делать :)
                    0
                    Эм… баннеры, выжирающие весь процессор — это ж сверхсовременно!
                      +1
                      Ну как. Большая разница. 50% флеш — это плохо, 50% CSS3 это круто и современно )
                      +3
                      Говорят, на странице логина mail.yandex.ru/ тоже какие-то крутые CCS3 штуки сделали.
                        +1
                        Весьма недурно выглядит.
                          –1
                          Кстати, тут есть все ноты и, наконец-то, можно сыграть, скажем Smoke on The Water. Но из-за задержки воспроизведения звука — сложно сыграть что-то ритмически =(
                        0
                        Рывками идёт в фф9 и хроме… В опере вообще не работает, жаль.
                          0
                          Ноутбук с процессором Pentium Dual Core T4500@2.300 GHz.
                          Нагрузка на процессор 47% при открытом окне с баннером.
                            +1
                            Вообще ничего не подлагивает. Отлично работает.
                            windows 7, ff 9
                            Нагрузка 8%
                              –2
                              с чего бы анимации в опере работать если префикса -o- у анимации нет…
                              кстати -ms- тоже…
                                +1
                                Не в префиксах счастье, а в доках и тестах. По ссылке есть архив, можете скачать и попробовать префиксы вставить, если получится анимация будет клево :)

                              Only users with full accounts can post comments. Log in, please.