Objek Bergoyang CSS3

Transkripsi

1

2 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 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 keyframes sebagai keyframe animasinya... Apa keyframes 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>

3 </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 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 coba { From { left: 0px; To { left: 200px; 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.

4 Oke, sekarang kita racik keyframe animasinya... :-) Nah, ini sedikit review racikan awal 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... 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)

5 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 px; 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;

6 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> 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)

7 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 px;.goyang:hover { animation-name: goyang; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: running;

8 </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... :-)