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...
