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

Animasi Header cantik dengan CSS3

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.


About Author

Sendy PK

Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di www.spkshop.web.id


Comment & Discussions

    Please LOGIN before if you want to give the comment.