Objek Bergoyang CSS3
Oleh: Mohammad Nur Huda
Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di
sela-sela waktu masih aja nih saya update tutorial buat temen-temen
jagocoding sekalian... Udah ahh, basa-basinya... Haha... :-) Kali ini kita
akan belajar membuat logo bergoyang dengan menggunakan CSS3 pastinya,
efek ini menggunakan @rule keyframes se...
Assallamualaikum...
Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Udah ahh, basa-basinya... Haha... :-)
Kali ini kita akan belajar membuat logo bergoyang dengan menggunakan CSS3 pastinya, efek ini menggunakan @rule keyframes sebagai keyframe animasinya...
Apa itu @rule keyframes => @rule keyframes adalah sebuah tempat untuk menampung parameter-parameter pergerakan pada suatu objek, seperti namanya yaitu keyframe berarti mengacu pada keyframe suatu animasi...
Oke, yuk kita praktekkan... :-)
Siapkan senjatanya dulu ( notepad bawaan windows )... Lalu buat struktur htmlnya...
<!DOCTYPE html> <html> <head> <title> </title> <style> </style> </head> <body>
</body> </html>
Kali ini kita membutuhkan 3 item parameter pada cssnya : ( keyframe buat animasinya, class, pseudo-class hovernya )
Kita buat kerangkanya terlebih dahulu... Buat kerangka keyframenya, seperti ini : @keyframes goyang {
}
Lalu kita buat kerangka class bernama goyang : .goyang {
}
Dan terakhir kerangka pseudo-class hovernya : .goyang:hover {
}
Sebelum berlanjut ke tahap meracik sebaiknya kita harus tau dulu pembagian waktu/timing pada css3...
Secara default penulisannya seperti ini : @keyframe coba { From { left: 0px; } To { left: 200px; } } Atau @keyframe coba { 0% { left: 0px; } 100% { left: 200px; } }
Pasti sudah kebayangkan cara mendeklarasikannya bagaimana.? :-)
Untuk pergerakan objeknya saya memberi perbandingan 50:100 tiap persentase perubahan bentuknnya...
Perlu di ingat : semakin banyak rasio perbandingan maka semakin halus pula berjalannya animasi di layar.
Oke, sekarang kita racik keyframe animasinya... :-) Nah, ini sedikit review racikan awal keyframesnya...
@keyframes goyang {
0% { transform: translate(0,0) rotate(0deg) }
2% { transform: translate(6px,-7px) rotate(2.5deg) } 4% { transform: translate(8px,-8px) rotate(2.5deg) } 6% { transform: translate(1px,-8px) rotate(-3.5deg) } 8% { transform: translate(-3px,4px) rotate(-0.5deg) } 10% { transform: translate(0,-3px) rotate(1.5deg) } /* dan seterusnya... */
}
Ayo sekarang kita imajinasikan, objek yang nanti kita buat adalah objek bergoyang.? Pasti objek kita nanti akan mengalami perubahan bentuk untuk bergerak kesamping kiri kanan dan berputar... :-) Sudah terimajinasikan.? Berarti yang kita butuhkan nanti adalah property transform dengan value translate (perpindahan) dan rotate (perputaran)...
Sedikit gambaran adalah, setiap keliapatan pergerakannya kita bumbui dengan translate (x,y) dan rotate ( deg ) dan peritem dapat anda atur sendiri sesuai selera...
Dan inilah hasil racikannya... :-) @keyframes goyang {
0% { transform: translate(0,0) rotate(0deg) }
2% { transform: translate(6px,-7px) rotate(2.5deg) } 4% { transform: translate(8px,-8px) rotate(2.5deg) } 6% { transform: translate(1px,-8px) rotate(-3.5deg) } 8% { transform: translate(-3px,4px) rotate(-0.5deg) } 10% { transform: translate(0,-3px) rotate(1.5deg) } 12% { transform: translate(-1px,2px) rotate(0.5deg) } 14% { transform: translate(6px,6px) rotate(-1.5deg) } 16% { transform: translate(-7px,4px) rotate(-0.5deg) } 18% { transform: translate(7px,8px) rotate(-3.5deg) } 20% { transform: translate(-6px,2px) rotate(1.5deg) } 22% { transform: translate(9px,5px) rotate(-1.5deg) } 24% { transform: translate(7px,-2px) rotate(0.5deg) } 26% { transform: translate(-7px,-10px) rotate(-0.5deg) } 28% { transform: translate(-10px,-8px) rotate(-1.5deg) } 30% { transform: translate(8px,4px) rotate(0.5deg) } 32% { transform: translate(0,4px) rotate(1.5deg) } 34% { transform: translate(-8px,6px) rotate(-0.5deg) } 36% { transform: translate(-5px,7px) rotate(1.5deg) } 38% { transform: translate(-4px,-4px) rotate(-1.5deg) } 40% { transform: translate(9px,4px) rotate(-1.5deg) } 42% { transform: translate(9px,-5px) rotate(2.5deg) } 44% { transform: translate(-5px,-4px) rotate(-2.5deg) } 46% { transform: translate(7px,-7px) rotate(1.5deg) }
48% { transform: translate(-5px,8px) rotate(0.5deg) } 50% { transform: translate(9px,1px) rotate(-1.5deg) } 52% { transform: translate(-9px,-5px) rotate(-3.5deg) } 54% { transform: translate(-2px,9px) rotate(1.5deg) } 56% { transform: translate(6px,-1px) rotate(1.5deg) } 58% { transform: translate(-6px,0) rotate(-0.5deg) } 60% { transform: translate(3px,1px) rotate(1.5deg) } 62% { transform: translate(5px,-7px) rotate(-0.5deg) } 64% { transform: translate(9px,2px) rotate(2.5deg) } 66% { transform: translate(6px,0) rotate(-2.5deg) } 68% { transform: translate(5px,-4px) rotate(-2.5deg) } 70% { transform: translate(-8px,5px) rotate(-2.5deg) } 72% { transform: translate(-6px,-2px) rotate(0.5deg) } 74% { transform: translate(-3px,7px) rotate(-3.5deg) } 76% { transform: translate(-7px,-8px) rotate(-3.5deg) } 78% { transform: translate(-1px,-2px) rotate(2.5deg) } 80% { transform: translate(8px,6px) rotate(-2.5deg) } 82% { transform: translate(-2px,-9px) rotate(2.5deg) } 84% { transform: translate(8px,-10px) rotate(-0.5deg) } 86% { transform: translate(-6px,0) rotate(2.5deg) } 88% { transform: translate(-1px,9px) rotate(-3.5deg) } 90% { transform: translate(-7px,8px) rotate(1.5deg) } 92% { transform: translate(-10px,-8px) rotate(0.5deg) } 94% { transform: translate(-8px,6px) rotate(1.5deg) } 96% { transform: translate(4px,-9px) rotate(2.5deg) } 98% { transform: translate(-4px,9px) rotate(0.5deg) } }
Oke selanjutnya kita beri parameter bagian classnya...
Di sini kita hanya membutuhkan margin saja untuk memberi jarak agar objek tidak terlalu di pojok... .goyang {
margin: 15px 0 0 15px; }
Untuk style yang terakhir adalah menjadikan hover kita sebagai proses jalannya animasi yang tadi kita buat...
Cmon’ stady di baris pseudo-class hovernya... :-)
Pada baris pertama kita buat deklarasi pemanggil keyframe animasi yang kita buat tadi... animation-name: goyang;
Lalu dibawahnya kita buat durasi untuk animasi kita nantinya... animation-duration: 5s;
Dan kita atur jalannya perulangan animasi menjadi infinite ( perulang-ulang/tak hingga )... animation-iteration-count: infinite;
Untuk timingnya kita pakai ( ease-in-out ) agar lebih slowww... animation-timing-function: ease-in-out;
Terakhir kita tambahkan play statenya agar animasi kita nanti langsung play/jalan saat cursor mouse saat posisi hover...
animation-play-state: running; And, ini jadinya rangkaian pseudo-classnya...
.goyang:hover { animation-name: goyang; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: running; }
Lalu kita beri gambar sebagai objek logo buat objek animasinya, pada tag body... <img class="goyang" src="1.png"/>
( kita beri deklarasikan atribut class dengan nama putar dan kita beri atribut src atau tempat direktori gambar yang dimaksud )
Jadi keseluruhan codenya, seperti ini... <!DOCTYPE html> <html> <head> <title> </title> <style> @keyframes goyang {
0% { transform: translate(0,0) rotate(0deg) }
2% { transform: translate(6px,-7px) rotate(2.5deg) } 4% { transform: translate(8px,-8px) rotate(2.5deg) } 6% { transform: translate(1px,-8px) rotate(-3.5deg) } 8% { transform: translate(-3px,4px) rotate(-0.5deg) } 10% { transform: translate(0,-3px) rotate(1.5deg) } 12% { transform: translate(-1px,2px) rotate(0.5deg) } 14% { transform: translate(6px,6px) rotate(-1.5deg) } 16% { transform: translate(-7px,4px) rotate(-0.5deg) }
18% { transform: translate(7px,8px) rotate(-3.5deg) } 20% { transform: translate(-6px,2px) rotate(1.5deg) } 22% { transform: translate(9px,5px) rotate(-1.5deg) } 24% { transform: translate(7px,-2px) rotate(0.5deg) } 26% { transform: translate(-7px,-10px) rotate(-0.5deg) } 28% { transform: translate(-10px,-8px) rotate(-1.5deg) } 30% { transform: translate(8px,4px) rotate(0.5deg) } 32% { transform: translate(0,4px) rotate(1.5deg) } 34% { transform: translate(-8px,6px) rotate(-0.5deg) } 36% { transform: translate(-5px,7px) rotate(1.5deg) } 38% { transform: translate(-4px,-4px) rotate(-1.5deg) } 40% { transform: translate(9px,4px) rotate(-1.5deg) } 42% { transform: translate(9px,-5px) rotate(2.5deg) } 44% { transform: translate(-5px,-4px) rotate(-2.5deg) } 46% { transform: translate(7px,-7px) rotate(1.5deg) } 48% { transform: translate(-5px,8px) rotate(0.5deg) } 50% { transform: translate(9px,1px) rotate(-1.5deg) } 52% { transform: translate(-9px,-5px) rotate(-3.5deg) } 54% { transform: translate(-2px,9px) rotate(1.5deg) } 56% { transform: translate(6px,-1px) rotate(1.5deg) } 58% { transform: translate(-6px,0) rotate(-0.5deg) } 60% { transform: translate(3px,1px) rotate(1.5deg) } 62% { transform: translate(5px,-7px) rotate(-0.5deg) } 64% { transform: translate(9px,2px) rotate(2.5deg) } 66% { transform: translate(6px,0) rotate(-2.5deg) } 68% { transform: translate(5px,-4px) rotate(-2.5deg) } 70% { transform: translate(-8px,5px) rotate(-2.5deg) } 72% { transform: translate(-6px,-2px) rotate(0.5deg) } 74% { transform: translate(-3px,7px) rotate(-3.5deg) } 76% { transform: translate(-7px,-8px) rotate(-3.5deg) } 78% { transform: translate(-1px,-2px) rotate(2.5deg) } 80% { transform: translate(8px,6px) rotate(-2.5deg) } 82% { transform: translate(-2px,-9px) rotate(2.5deg) } 84% { transform: translate(8px,-10px) rotate(-0.5deg) } 86% { transform: translate(-6px,0) rotate(2.5deg) } 88% { transform: translate(-1px,9px) rotate(-3.5deg) } 90% { transform: translate(-7px,8px) rotate(1.5deg) } 92% { transform: translate(-10px,-8px) rotate(0.5deg) } 94% { transform: translate(-8px,6px) rotate(1.5deg) } 96% { transform: translate(4px,-9px) rotate(2.5deg) } 98% { transform: translate(-4px,9px) rotate(0.5deg) } } .goyang { margin: 15px 0 0 15px; } .goyang:hover { animation-name: goyang; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: running;
} </style> </head> <body> <img class="goyang" src="1.png"/> </body> </html>
Atau versi demonya...
Sekian tutorial dari saya, sampai jumpa pada tutorial selanjutnya dari saya... Stay coding dan don’t afraid about debuging...
Tentang Penulis
Mohammad Nur Huda
Masih menjadi newbie di sela-sela orang penting, mencoba dan berharap dapat sebagaian ilmu dari mereka . . . :-)
