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/
numpang belajar dari blog ini
Reply
Read Online Naruto Reply:20-10-2010 at 20:37
ayo, kita semua sama-sama belajar
Reply
absen bang alwi :D hohohohoho
Reply
Read Online Naruto Reply:20-10-2010 at 20:38
ayo, untung gak terlambat mas
Reply
Ini baru tutorial, mantap dan jelas. Terus berkarya Kang, salam kenal
Reply
Selamat memulai aktifitas semua, sukses selalu
Reply
Wah, sekarang sudah eranya CSS3 dan HTML5, berharap era web 2.0 segera berakhir dan digantikan dengan yang baru
Reply
Hybrid car Reply:22-10-2010 at 09:53
Tapi untuk urusan script jadi harus belajar lagi…
Reply
akhirnya keLuar juga animasi nya..
kreatif…
Reply
Muhammad Faisal Aziz Reply:21-10-2010 at 15:46
iya,kreatif.Bagus lagi,itu bolanya euro 2012 ya?
Reply
wew,kreatif.Bagus lagi Gambarnya.Thanks for infonya
Reply
wah menarik sekali mas alwi
Reply
keren juga yah sonic nya..
Reply
gunain software apa mas bwt bikin animasi sonic?
Reply
Hybrid car Reply:25-10-2010 at 08:38
Biasanya pake flash bro…
Reply
Alwi Reply:26-10-2010 at 19:35
Untuk gambar sonic pakai photoshop format gif terus ditambah efek scale dan transform dg CSS3 dan masih bisa juga ditambahkan efek lainnya seperti gerakan akrobatik, guling2 dll dg CSS3 dan webkit
Reply