Membuat Animasi Web Banner Pure Css3

Membuat Animasi Web Banner Pure Css3 16:11

View demoDownload source

Oke , pada posting awal bulan ini saya mau menyuguhkan sesuatu yang menarik dari Css . Memang sih ini bukan hal baru ataupun sesuatu yang wow , hanya saja sepertinya ini layak untuk anda pelajari dan mungkin diterapkan untuk memancing minat visitor pada website anda .

Hal yang akan saya bagikan sekarang ini adalah Cara Membuat Web Banner Animasi .
Tapi sebelumnya bahwa browser yang paling mendukung untuk Css animation adalah Webkit dan Firefox , dan untuk apra pengguna Internet Explorer v7 kebawah sepertinya anda harus sesegera mungkin meng-upgrade peramban anda untuk bisa menikmati Css versi baru .

Untuk membuat Css Animasi dan mempelajarinya lebih lanjut mungkin ada perlunya anda membaca ini terlebih dulu . Dan buat yang sudah akrab dengan Css Animasi , maka langsung saja kita masuk ke inti pembahasan pada topik kali ini .

Langkah pertama yang akan kita lakukan adalah membuat Struktur HTML dimana kita akan memberikan sentuhan dan menjalankan fungsi Animasi ( target eksekusi ) .
Disini saya tidak akan menjelaskan panjang lebar , dan struktur HTML yang kita perlukan adalah seperti ini

<div id="ad-1">
    <div id="content">
        <h2>Lost at sea?</h2>
        <h3>Relax - we've got your rudder.</h3>
        <form>
            <input type="text" id="email" value="Email address..." />
            <input type="submit" id="submit" value="Guide me" />
        </form>
    </div>
    <div id="clouds">
        <ul id="cloud-group-1">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
        <ul id="cloud-group-2">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
    </div>
    <ul id="boat">
        <li>
            <div id="question-mark"></div>
        </li>
    </ul>
    <ul id="water">
        <li id="water-back"></li>
        <li id="water-front"></li>
    </ul>
</div>
Kemudian siapkan Css nya .

/*Animate */

@keyframe our-fade-in-animation {
    0%   {opacity:0;}
    100% {opacity:1;}
}

div {
    opacity: 1; /* This div is visible by default */
    animation: our-fade-in-animation 1s 1;
}
Pada dasarnya , untuk membuat animasi dengan css adalah dengan menggunakan Css @keyframe seperti diatas . Mungkin sebaiknya kita belajar lebih jauh mengenai hal ini ,mungkin dengan mengunjungi tautan diatas atau anda bisa mencarinya sendiri penjelasan detail dan mendasar serta mendalam tentang Css animasi ini .
Tapi lupakan itu sejenak dan kita lanjutkan pekerjaan kita . Untuk sementara ikuti ini dulu dengan baik jika anda sudah terlanjur membaca ini .

Kemudian kita buat styling untuk masing masing bagiannya ...

#ad-1 {
    width: 720px;
    height: 300px;
    float: left;
    margin: 40px auto 0;
    background-image: url(../images/ad-1/background.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 6px #000;
}
Css diatas adalah Css dasar dari konten yang tengah kita buat yaitu Iklan atau banner .

Selanjutnya kita berikan styling pada Text dan Form Email dengan Css dibawah ini

#ad-1 #content {
    width: 325px;
    float: right;
    margin: 40px;
    text-align: center;
    z-index: 4;
    position: relative;
    overflow: visible;
}
#ad-1 h2 {
    font-family: 'Alfa Slab One', cursive;
    color: #137dd5;
    font-size: 50px;
    line-height: 50px;
    text-shadow: 0px 0px 4px #fff;
    animation: delayed-fade-animation 7s 1 ease-in-out; /* This will fade in our h2 with a simulated delay */
}
#ad-1 h3 {
    font-family: 'Boogaloo', cursive;
    color: #202224;
    font-size: 31px;
    line-height: 31px;
    text-shadow: 0px 0px 4px #fff;
    animation: delayed-fade-animation 10s 1 ease-in-out; /* This will fade in our h3 with a simulated delay */
}
#ad-1 form {
    margin: 30px 0 0 6px;
    position: relative;
    animation: form-animation 12s 1 ease-in-out;  /* This will slide in our email address form with a cool elastic effect. This also has a simulated delay */
}
#ad-1 #email {
    width: 158px;
    height: 48px;
    float: left;
    padding: 0 20px;
    font-size: 16px;
    font-family: 'Lucida Grande', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #a2917d;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border:1px solid #a2917d;
    outline: none;
    box-shadow: -1px -1px 1px #fff;
    background-color: #c7b29b;
    background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
}
#ad-1 #email:focus {
    background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
   
}
#ad-1 #submit {
    height: 50px;
    float: left;
    cursor: pointer;
    padding: 0 20px;
    font-size: 20px;
    font-family: 'Boogaloo', cursive;
    color: #137dd5;
    text-shadow: 1px 1px 0px #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border:1px solid #bcc0c4;
    border-left: none;
    background-color: #fff;
    background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
}
#ad-1 #submit:hover {
    background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
}
Dan sekarang kita mulai mengatur Style pada air (watter)  pada banner kita kali ini

#ad-1 ul#water{
    /* If we wanted to add another animation to the water (move it horizontally for instance), we could do that here */
}
#ad-1 li#water-back {
    width: 1200px;
    height: 84px;
    background-image: url(../images/ad-1/water-back.png);
    background-repeat: repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: -20px;
    animation: water-back-animation 3s infinite ease-in-out; /* Bobbing water effect */
}
#ad-1 li#water-front {
    width: 1200px;
    height: 158px;
    background-image: url(../images/ad-1/water-front.png);
    background-repeat: repeat-x;
    z-index: 3;
    position: absolute;
    bottom: -70px;
    left:-30px;
    animation: water-front-animation 2s infinite ease-in-out; /* Another bobbing water effect - yet slightly different. We'll make this animation move a little bit faster in order to create some perspective. */
}
Dan kali ini kita masuk ke bagian Boat dan bagian-bagian lainnya pada banner

#ad-1 ul#boat {
    width: 249px;
    height: 215px;
    z-index: 2;
    position: absolute;
    bottom: 25px;
    left: 20px;
    overflow: visible;
    animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */
}
#ad-1 ul#boat li {
    width: 249px;
    height: 215px;
    background-image: url(../images/ad-1/boat.png);
    position: absolute;
    bottom: 0px;
    left: 0px;
    overflow: visible;
    animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */
}
#ad-1 #question-mark {
    width: 24px;
    height: 50px;
    background-image: url(../images/ad-1/question-mark.png);
    position: absolute;
    right: 34px;
    top: -30px;
    animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */
}
Bagian Awan

#ad-1 #clouds {
    position: absolute;
    top: 0px;
    z-index: 0;
    animation: cloud-animation 30s infinite linear; /* Scrolls the clouds off to the left, resets, and repeats */
}
#ad-1 #cloud-group-1 {
    width:720px;
    position: absolute;
    left:0px;
}
#ad-1 #cloud-group-2 {
    width: 720px;
    position: absolute;
    left: 720px;
}
#ad-1 .cloud-1 {
    width: 172px;
    height: 121px;
    background-image: url(../images/ad-1/cloud-1.png);
    position: absolute;
    top: 10px;
    left: 40px;
}
#ad-1 .cloud-2 {
    width: 121px;
    height: 75px;
    background-image: url(../images/ad-1/cloud-2.png);
    position: absolute;
    top: -25px;
    left: 300px;
}
#ad-1 .cloud-3 {
    width: 132px;
    height: 105px;
    background-image: url(../images/ad-1/cloud-3.png);
    position: absolute;
    top: -5px;
    left: 530px;
}
Yap .... Itu dia styling untuk bagian konten bannernya . Cukup panjang ternyata .
Dan sekarang tugas kita adalah tinggal mengeksekusi dengan Css animation .

/* An animation with a simulated delay used to fade in multiple elements. We've achieved a simulated delay by starting the fade in process 80% of the way through the animation (instead of starting the process immediately). We can use this technique and increase the animation duration on any element to reach the desired delay duration: */

@keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

/* An animation that will slide in our email address form. We've spiced this animation up by overshooting the desired position and sliding it back - this creates a nice elastic effect. As you can see, this animation also uses a simulated delay: */

@keyframes form-animation {
    0%   {opacity: 0; right: -400px;}
    90%  {opacity: 0; right: -400px;}
    95%  {opacity: 0.5; right: 20px;}
    100% {opacity: 1; right: 0px;}
}

/* This is as basic as an animation gets. Only two keyframes and no simulated delay. This animation slides the boat in from the left when the ad begins: */

@keyframes boat-in-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

/* Here's our really cool cloud animation. The first group of clouds will start off aligned in the center with the second group off to the right of the screen. While the left group of clouds is sliding off the screen to the left, the right group will begin to appear on the right side of the screen. As soon as the left group is completely off the screen, the clouds will reset (very quickly) to their original positions and repeat: */

@keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -720px;}
    100%     {left: 0px;}
}

/* These last 3 animations are all basically the same - the only difference being the position of each element. They will emulate the bobbing effect of an ocean: */

@keyframes boat-animation {
    0%   {bottom: 0px; left: 0px;}
    25%  {bottom: -2px; left: -2px;}
    70%  {bottom: 2px; left: -4px;}
    100% {bottom: -1px; left: 0px;}
}
@keyframes water-back-animation {
    0%   {bottom: 10px; left: -20px;}
    25%  {bottom: 8px; left: -22px;}
    70%  {bottom: 12px; left: -24px;}
    100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
    0%   {bottom: -70px; left: -30px;}
    25%  {bottom: -68px; left: -32px;}
    70%  {bottom: -72px; left: -34px;}
    100% {bottom: -69px; left: -30px;}
}
Yaap , sekarang banner kita sudah bisa berfungsi dengan baik . itu seharusnya ...

Dan mungnkin itu saja dulu karena sudah saya katakan diatas bahwa saya tidak akan menjelaskan panjang lebar mengenai kasus ini karena saya bukan ahlinya .

Untuk lebih lengkap tentang tutorial ini anda bisa mengikuti tautan ini .


View demoDownload source

Share this Article

Related Posts

Previous
Next Post »

7 comments

Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon