CSS3, Sonic Mengejar Bola
Dulu sebelum ada CSS3 untuk membuat efek animasi biasanya memerlukan bantuan javascript. Sekarang dengan teknik dan fitur yang ada di CSS3 dan dengan bantuan browser atau peramban yang sudah mendukung WebKit seperti Google Chrome/Safari kita bisa membuat efek animasi baik pada teks, gambar atau video seperti kalau kita menggunakan Power Point, bahkan dengan CSS3 kita juga bisa membuat film kartun atau games.
Mempelajari CSS3 ternyata sangat-sangat mengasikkan, terutama efek animasinya. Namun sayang, belum semua browser atau peramban bisa menampilkan efek-efek animasi tersebut. secara penuh kecuali Google Chrome/Safari terbaru. Untuk Firefox 4 beta dan Opera 10.62 hanya bisa menampilkan beberapa efek animasi saja, (*ngedumel sendiri*) kapan sich semua peramban bisa kompak dan standard.
Pada kesempatan ini, sedikit berbagi dari hasil mempelajari CSS3 dan sedikit utak-atik, di bawah ini saya tampilkan tips dan triks CSS3 yaitu Sonic mengejar bola.
Demo Sonic Mengejar Bola, silahkan dibuka dengan Google Chrome/Safari terbaru
Arahkan mouse ke dalam box (Hover)
Kode CSS-nya :
<style>
#timings_bola {
background:#7DB440 url(http://domainanda.com/img/rumput.png
);
-webkit-box-shadow: 5px 5px 5px #818181;
-moz-box-shadow: 5px 5px 5px #818181;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
width:580px;
height:306px;
margin:0 auto;
border:1px #006600;
padding:5px;
}
.bola_1 {
margin-top:200px;
width:100px;
height:100px;
margin-bottom:10px;
}
#gelinding.bola_1 {
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
}
.bola_2 {
margin-top:-110px;
width:100px;
height:100px;
margin-bottom:10px;
}
#gelinding.bola_2 {
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
-webkit-transition: all 3s linear;
transition: all 3s linear;
}
.sonic_1 {margin-top:-70px;margin-left:20px;
width:54px;
height:62px;}
#lari.sonic_1 {
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
.sonic_2 {
margin-top:-70px;
margin-left:50px;
width:54px;
height:62px;
}
#lari.sonic_2 {
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
#timings_bola:hover .bola_1, #timings_bola.hover_effect .bola_1 {
margin-left:480px;
-webkit-transform: translate(540px,-500px);
-moz-transform: translate(540px,-500px);
-o-transform: translate(540px,-500px);
}
#timings_bola:hover .bola_2, #timings_bola.hover_effect .bola_2 {
margin-left:480px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#timings_bola:hover .sonic_1, #timings_bola.hover_effect .sonic_1 {
-webkit-transform: translate(940px,-400px);
-moz-transform: translate(940px,-400px);
-o-transform: translate(940px,-400px);}
#timings_bola:hover .sonic_2, #timings_bola.hover_effect .sonic_2 {
margin-left:470px;
margin-left:530px;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
transform: translate(0,0);
}
</style>
Kode HTML-nya :
<h2 align="center">Demo Sonic Mengejar Bola, by Alwi</h2> <div id="timings_bola"> <div id="gelinding" class="bola_1"><img src="http://domainanda.com/img/bola.png
"></div> <div id="gelinding" class="bola_2"><img src="http://domainanda.com/img/bola.png
"></div> <div id="lari" class="sonic_1"><img src="http://domainanda.com/img/sonic.gif
"></div> <div id="lari" class="sonic_2"><img src="http://domainanda.com/img/sonic.gif
"></div> </div> <p style="text-align: center; margin-top: 10px;"><strong> Arahkan mouse ke dalam box (Hover)</strong></p>
Keterangan : Ganti yang saya beri warna biru dengan URL gambar anda.
Animasi lainnya akan saya tampilkan di postingan berikutnya, seperti Zoom In Zoom Out, Rotation, Transitions, Cross fading images, Sliding, Flipping dan lain-lain. Ok !, Selamat berkreasi dan mengeksplorasi kelebihan-kelebihan CSS3.
http://domainanda.com/img/
emang sonic hobi main bola ya kang?he3
Reply
Alwi Reply:26-10-2010 at 19:28
Heee … iseng aja …. tiba2 pingin bikin sonic ngejar bola …
Reply
css3 ama html5 emank bikin dunia web lebih seger… :D
Reply
keren sob
makasih ya
Reply
kirain bolanya juga ikut lari..hehe
tapi bagus..
Reply
Alwi Reply:30-10-2010 at 22:54
Untuk melihat efek animasinya harus menggunakan browser/peramban berbasis webkit seperti Google Chrome/Safari terbaru
Reply
harus pakai chrome atau safari ya
Reply
Kalau dibuat agak lambat bisa kan mas? Itu kecepeten je.
Reply
Alwi Reply:11-11-2010 at 23:55
Bisa Kang, tinggal diganti angkanya di pengaturan
transition
-nya menjadi 4s, 5s dan seterusnya sesuai selera.Reply
Laen kali mungkin bisa dicoba supaya larinya bola sebarang mas.
Reply
Alwi Reply:12-11-2010 at 00:27
Bisa Kang, dibuat muter jumpalitan juga bisa …
Reply
Guru Go!Blog Reply:12-11-2010 at 00:32
Kalau memang bisa, mungkin sekalian dibuat dalam bentuk flash, lalu di zip untuk di sedot buat game anyakku akan lebih bagus lho mas. (Ijik ngeyel ndotndoten) :lol:
Reply
wah bagus nih, semakin menarik saja pembahasan css ini
Reply
wah bikin semangat nih info yang bagus
Reply