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/
Maaf, Izin mengamankan yang pertama. Boleh khan?
sekedar nyontek Kang Alam.
Reply
Bang Iwan Reply:18-10-2010 at 06:23
Info yang mantap kang makasih banyak…
Reply
Bang Iwan Reply:18-10-2010 at 06:23
Saya harus belajar banyak tentang hal ini
Reply
Barcode Printer Reply:21-10-2010 at 11:04
mantaf tenan euyy, asyik !!
Reply
Hybrid car Reply:19-10-2010 at 09:34
Lagi-lagi kalah sama bang iwan…
Reply
Barcode Printer Reply:21-10-2010 at 11:04
bang Iwan punya radar untuk deteksi pertamax
Reply
Read Online Naruto Reply:20-10-2010 at 20:28
sepp juga nih kang animasinya, ada NARUTO gak?
Reply
Barcode Printer Reply:21-10-2010 at 11:03
hak cipta kang alamendah nih
Reply
thanks infonya sobat
Reply
Read Online Naruto Reply:20-10-2010 at 20:28
sama-sama sobat, datang lagi yah..
Reply
Barcode Printer Reply:21-10-2010 at 11:04
trims juga infonya keren pisan ueyyy
Reply
Wah info yang menarik nih mas Alwi..
Reply
dHaNy Reply:18-10-2010 at 14:37
Perlu dipraktekkan nih… memang perkembangan css3 ni semakin cerdas saja…
Reply
dHaNy Reply:18-10-2010 at 14:38
Bisa dipraktekkan di header blog gak mas??
Reply
Alwi Reply:18-10-2010 at 21:53
teknik ini bisa juga diterapkan di header, untuk css tinggal ditambahkan di file css pada theme yg digunakan dan kode html ditambahkan di file header.php
Reply
dHaNy Reply:18-10-2010 at 15:16
saya juga pengen buat banner animasi sekelas flash tp blm tau tutorialnya yg cepat dipahami…
Reply
Read Online Naruto Reply:20-10-2010 at 20:29
yap, info yang menarik untuk tujuan memberi..
Reply
Barcode Printer Reply:21-10-2010 at 11:05
so amazing trick for this posting, keren lah
Reply
wah mantep infonya…ditunggu perkembangan selanjutnya..
Reply
Read Online Naruto Reply:20-10-2010 at 20:30
oke deh, sampe jumpa di lain waktu.
Reply
Barcode Printer Reply:21-10-2010 at 11:05
sayonara2 sampai berjumpa pula…
Reply
Makasi mas tutorialnya.. Mantab banget..
Reply
Read Online Naruto Reply:20-10-2010 at 20:30
sepp, datang lagi yah di lain waktu
Reply
Lucu banget gambarnya, efek 3D terasa pada halaman rumput karena ada penggunaan
box-shadow
tapi sebenarnya penggunaannya cukup ditulisbox-shadow
saja karena tidak bisa terlihat di IE-9 & peramban modern saat ini sudah pada mendukung kok Mas, tanpa ada penambahan kode -moz, -webkit, ataupun -o… :DReply
Alwi Reply:18-10-2010 at 21:50
Thank tambahannya, sayang saya belum bisa menggunakan IE9 karena semua kompi masih pakai XP
Reply
Hybrid car Reply:19-10-2010 at 12:27
Ganti Windows 7 sob….lebih enteng daripada vista….
Reply
Read Online Naruto Reply:20-10-2010 at 20:31
bener banget sangat lucu sekali, coba saja ada animasi naruto yah??
Reply
Barcode Printer Reply:21-10-2010 at 11:06
benar2 menarik untuk di coba permax ,supaya variatif
Reply
lagi-lagi ketemu sama script….
belajar lagi nih….
tetap semangat !!
Reply
Hybrid car Reply:19-10-2010 at 09:35
CSS saja belum kelar-kelar…. :(
Reply
Read Online Naruto Reply:20-10-2010 at 20:32
ketemu script Puussiiing bget mas..
Reply
Hybrid car Reply:21-10-2010 at 12:58
Pusing sob, tapi kalau berhasil….senangnya tak terkira… :)
Reply
Barcode Printer Reply:21-10-2010 at 11:07
semangat tak pernah luntur maju terus pantang mundur
Reply
Hybrid car Reply:22-10-2010 at 09:49
Siiiaaaaap juragaaan… !!
Reply
sonic lagi sepedahan ada ga’
??
Reply
Read Online Naruto Reply:20-10-2010 at 20:33
gak juga kali mas, sonic itu lagi mo ikutan sea games nanti..
Reply
hmm, bagus juga ya hasilnya,, heheh! bang minta sharein pake flash ma dreamweaver dung.. mau belajar neh,, makasih
Reply
Hybrid car Reply:20-10-2010 at 09:07
cari aja sob di gudangilmu.com …. hehe…
Reply
Read Online Naruto Reply:20-10-2010 at 20:34
klo pake photoshop ada gak yah?
Reply
Hybrid car Reply:22-10-2010 at 09:50
gogling saja sob…. banyak kliatannya…
Reply
ngintip ah soal coding CSS, belum terlalu ngerti saya soal beginian, mohon ijin belajar :D
Reply
Read Online Naruto Reply:20-10-2010 at 20:36
ayo, kita sama-sama belajar..
Reply