Header merupakan bagian penting dalam website yang menunjukan judul dan jati diri pada website tersebut, pada tutorial kali ini kita akan belajar cara membuat Animasi Header yang cantik dengan CSS3, anda bisa mengambil file yang dibutuhkan di sini

HTML

<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>

Di bawah ini adalah file yang kita butuhkan untuk resource header

CSS

Untuk medapatkan efek salju, Kita akan menganimasikan properti background-position untuk background.header pertama, untuk browser yang tidak mendukung background, salju tidak akan terlihat seperti di bawah ini.

.header{
    margin: 0 0 30px;
    background: url(header-bg.png);
    background: url(snow-bg.png) repeat-y center, url(header-bg.png);
    animation: animate-snow 9s linear infinite;        
}

@keyframes animate-snow
{
    0% { background-position: center 0, 0 0;}
    100% { background-position: center 885px, 0 0;}
}

elemen .wrapper secara dasar memegang semua pohon Natal dengan manusia salju. Harap dicatat deklarasi posisi: relatif:

.wrapper{
    width: 960px;
    height: 315px;
    margin: auto;
    overflow: hidden;
    position: relative;
    background: url(wrapper-bg.png) no-repeat bottom;
}

Untuk pohon Natal, nilai animation-duration secara acak diubah untuk menciptakan efek keren:

@keyframes animate-drop {   
    0% {opacity:0;transform: translate(0, -315px);}
    100% {opacity:1;transform: translate(0, 0);}
}   

.christmas-tree,
.snowman {
    position: absolute;
    animation: animate-drop 1s linear;
}

.christmas-tree {
    width: 112px;
    height: 137px;
    background: url(christmas-tree.png);
}

.snowman {
    width: 115px;
    height: 103px;
    top: 195px;
    left: 415px;
    background: url(snowman.png);
    animation-duration: .6s;
}   
    
.tree1 {
    top: 165px;
    left: 35px;
    animation-duration: .6s;       
}

.tree2 {
    left: 185px;
    top: 175px; 
    animation-duration: .9s;       
}

.tree3 {
    left: 340px;
    top: 125px; 
    animation-duration: .7s;       
}

.tree4 {
    left: 555px;
    top: 155px; 
    animation-duration: .8s;       
}

.tree5 {
    left: 710px;
    top: 170px; 
    animation-duration: .7s;       
}

.tree6 {
    left: 855px;
    top: 125px;
    animation-duration: .6s;       
}

Berikut browser yang support saat ini: Firefox 5 +, IE 10 +, Chrome 6 +, Safari 5 +. Untuk browser yang tidak support, Kita tidak perlu khawatir, semuanya akan baik-baik saja selama Kita memberikan fallbacks yang layak.

Itulah tadi contoh animasi header menggunakan CSS3, semoga dapat membuat website yang akan anda buat menjadi lebih indah, Selamat Mencoba.