Лого SiteHere.ru

Новогодняя анимированная шапка на CSS3

 Новогодняя анимированная шапка на CSS3

До нового года осталось меньше двух месяцев, и я считаю что уже необходимо готовить ваши сайты в этому событию. А начнем мы подготовку с шапки сайта, и в этом уроке мы создадим анимированную новогоднюю шапку на CSS3.

Пример анимации можно увидеть здесь:

Посмотреть примерСкачать

Вы, наверное, уже знаете как создается анимация на CSS3. Она создается с помощью правила @keyframes. Но в уроке мы не будем использовать префиксы(-webkit, -moz, -ms), чтобы не писать много кода.



HTML часть

Структура документа простая:

1
2
3
4
5
6
7
8
9
10
11
<div class="header">
    <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>


Необходимые изображения:

Елка Небо Снег

Идущий снег, но его здесь не видно 🙂

Снеговик Снег фон


CSS часть

Для того чтобы была анимация идущего снега необходимо изменять значение свойства background-position:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.header {
    margin: 0 0 30px;
    background: url(../images/header-bg.png);
    background: url(../images/snow-bg.png) repeat-y center, url(../images/header-bg.png);
    -webkit-animation: animate-snow 9s linear infinite;
    -moz-animation: animate-snow 9s linear infinite;
    -ms-animation: animate-snow 9s linear infinite;
    animation: animate-snow 9s linear infinite;		
}
 
@keyframes animate-snow
{
    0% { background-position: center 0, 0 0;}
    100% { background-position: center 885px, 0 0;}
}

А блок с классом wrapper будет содержать фон, а также елки со снеговиком:

1
2
3
4
5
6
7
8
.wrapper {
    width: 960px;
    height: 315px;
    margin: auto;
    overflow: hidden;
    position: relative;
    background: url(../images/wrapper-bg.png) no-repeat bottom;
}

Затем елки появляются не одновременно, что и создает такой красивый эффект:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
@keyframes animate-drop {
    0% {opacity:0;transform: translate(0, -315px);}
    100% {opacity:1;transform: translate(0, 0);}
}  	
 
.christmas-tree, .snowman {
    position: absolute;
    -moz-animation: animate-drop 1s linear;
    -webkit-animation: animate-drop 1s linear;
    -ms-animation: animate-drop 1s linear;
    animation: animate-drop 1s linear;
}
 
.christmas-tree {
    width: 112px;
    height: 137px;
    background: url(../images/christmas-tree.png);
}
 
.snowman {
    width: 115px;
    height: 103px;
    top: 195px;
    left: 415px;
    background: url(../images/snowman.png);
    -moz-animation-duration: .6s;
    -webkit-animation-duration: .6s;
    -ms-animation-duration: .6s;
    animation-duration: .6s;
}	
 
.tree1 {
    top: 165px;
    left: 35px;
    -moz-animation-duration: .6s;
    -webkit-animation-duration: .6s;
    -ms-animation-duration: .6s;
    animation-duration: .6s;		
}
 
.tree2 {
    left: 185px;
    top: 175px;	
    -moz-animation-duration: .9s;
    -webkit-animation-duration: .9s;
    -ms-animation-duration: .9s;
    animation-duration: .9s;		
}
 
.tree3 {
    left: 340px;
    top: 125px;	
    -moz-animation-duration: .7s;
    -webkit-animation-duration: .7s;
    -ms-animation-duration: .7s;
    animation-duration: .7s;		
}
 
.tree4 {
    left: 555px;
    top: 155px;	
    -moz-animation-duration: .8s;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;		
}
 
.tree5 {
    left: 710px;
    top: 170px;	
    -moz-animation-duration: .7s;
    -webkit-animation-duration: .7s;
    -ms-animation-duration: .7s;
    animation-duration: .7s;		
}
 
.tree6 {
    left: 855px;
    top: 125px;	
    -moz-animation-duration: .6s;
    -webkit-animation-duration: .6s;
    -ms-animation-duration: .6s;
    animation-duration: .6s;		
}

Браузеры, которые поддерживают данный эффект:Firefox 5+, IE 10+, Chrome 6+, Safari 5+.



Вывод

Действительно потрясающий эффект. Ближе к новому году можно будет устанавливать :).


Успехов!

Источник: red-team-design.com

5 комментариев к записи
  • Вячеслав

    Не плохо,но наврятли кто захочет менять свои шапки.Если и будут что ли бо делать то просто дополнять разными фишками на сайте.

     
    • Юрий

      Для этого я и опубликовал данный урок. Конечно не хочется менять свой дизайн, но отдельные элементы могут пригодиться.

       
  • Майя

    Спасибо! Я немножко изменила эту шапку.

    А можно ли сделать так, чтобы падали не снежинки, а например, цветочки или сердечки?

     
  • Юрий

    Здравствуйте. Так сделать можно. Вместо изображения снежинок — snow-bg.png, Вам нужно вставить в таком же виде сердечки или цветочки.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *