Efek Mengambang CSS3 Oleh: Mohammad Nur Huda
Assallamualaikum... Masih bersama saya Mazhuda, sambil ngangur nih di kampung kelahiran... :-) Dari pada gak ngapain-ngapain mending kita sharing ilmu aja di sini... :-) Kali ini kita akan membahas efek mengambang pada hover css3, seperti tutorial kemaren yang menggunakan @rule keyframes kali ini juga mengupas seputar itu ...
Assallamualaikum... Masih bersama saya Mazhuda, sambil ngangur nih di kampung kelahiran... :-) Dari pada gak ngapain-ngapain mending kita sharing ilmu aja di sini... :-) Kali ini kita akan membahas efek mengambang pada hover css3, seperti tutorial kemaren yang menggunakan @rule keyframes kali ini juga mengupas seputar itu juga namun kali ini bedanya terletak pada teknik callback... Wah, kayaknya pernah denger nih.? Pasti fungsi dari Jquery.? Jawabnya bukan.!! Yang dimaksud disini adalah teknik perulangan animasi keyframes yang sudah ada... Tanpa basa-basi lagi, yuk kita praktekkan... :-) Ingat!! Yang ingin benar-benar belajar harus pake notepad biasa lho ya, biar faham sampean iku... Mulai dengan membuat struktur htmlnya...
<style>
Selanjutnya buatlah 2 @rule keyframes, 1 buah class, dan 1 buah pseudo-class... Pertama buatlah keyframes animasi yang bernama ngambang, seperti di bawah ini... ( dengan perbandingan 0% : 50% : 100% ) @keyframes ngambang { 0% { } 50% { } 100% { } } Terus pergerakannya apa aja.? Kita lihat kembali judulnya tadi... Haha ( kyak master aja ) Dari judulnya tadikan “Efek Mengambang CSS3” berarti sekarang kita buat objek tersebut dapat bergerak secara vertikal seperti mengambang... Lebih tepatnya kita nanti menggunakan Property Transform Bervalue TranslateY ( pergerakan beracuan sumbu Y )... Dan secara bertahap akan looping animasi jadi objek tersebut akan kelihatan seperti mengambang... Untuk pergerakan pada state 0% kita akan buat seperti ini... transform: translateY(-8px); ( berarti posisi objek akan naik ke atas / meninggi dari posisi semula karena bernilai negatif ) Ke – 2, Untuk state 50%nya kita buat seperti ini... transform: translateY(-4px); ( berarti objek akan di kurangi posisinya dari state sebelumnya ) Ke – 3, Untuk state 100% kita buat seperti state 0%... transform: translateY(-8px); ( objek kembali pada posisi semula ) Jadi seluruh parameternya seperti ini... @keyframes ngambang { 0% { transform: translateY(-8px); }
50% { transform: translateY(-4px); } 100% { transform: translateY(-8px); } } Udah pada kebayangkan nanti bakal kyak gimana objeknya.? Iya, betul objek akan naik turun dan naik lagi... Namun hal ini membuat animasi akan terasa sedikit kaku, untuk itu kita barengi dengan teknik callback tadi... Buat @rule keyframe baru dengan nama ulangi, seperti ini... @keyframes ulangi { 100% { } } Kog langsung pada state 100%.? Hal ini sebenarnya untuk mengecoh pergerakan objek agar tidak bergerak ke bawah secara langsung... Lalu buat nilai transform seperti keyframes ngambang saat state 100%, seperti ini... @keyframes ulangi { 100% { transform: translateY(-8px); } } Untuk class objeknya kita beri nama yang sama seperti yang sebelumnya yaitu [ ngambang ]... .ngambang { } Cukup buat property margin agar posisi objek tidak terlalu di pojok... margin: 15px 0 0 15px; Jadi untuk class ngambangnya hanya ini saja... .ngambang { margin: 15px 0 0 15px;
} Terkahir pemanggilan animasi keyframes saat dalam posisi hover... Buat pseudo-class hover untuk class ngambang, seperti ini... .ngambang:hover { } Ini deklarasi pada hovernya secara berurutan... Pertama buat Property pemanggil keyframes yang tadi kita buat, di sini kita pakai properti animation-name, seperti berikut... animation-name: ngambang, ulangi; ( kita panggil keyframe ngambang dan keyframe ulangi secara serentak / bersama-sama ) Lalu buat durasinya dan delaynya ( jeda )... animation-duration: 0.3s, 1.5s; animation-delay: 0s, 0.3s; Untuk timingnya kita beri jenis timing ease-out untuk ngambang dan ease-in-out untuk yang ulangi... animation-timing-function: ease-out, ease-in-out; Selanjutnya pada perulangan animasi atau iteration countnya kita beri berurutan 1, infinite... Untuk yang akhir bernilai infinite agar animasi keyframe ulangi berjalan terus menggantikan animsai keyframe ngambang yang bernilai looping satu tadi, seperti ini... animation-iteration-count: 1, infinite; Agar animasi bergerak maju terus / tidak nyendat-nyendat maka kita beri property animation-fill-mode dengan nilai forwards, seperti ini... animation-fill-mode: forwards; Memberi kesan memantul kita beri juga Property animation-direction dengan nilai alternate pada keyframe ulangi, seperti ini... animation-direction: normal, alternate; Dan terakhir kita beri efek bayangan agar terlihat nampak lebih realistis...
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5); Lalu kita beri gambar logo buat objek animasinya, pada tag body...
( kita beri deklarasikan atribut class dengan nama putar dan kita beri atribut src atau tempat direktori gambar yang dimaksud ) Jadi keseluruhan codenya, seperti ini...
<style> @keyframes ngambang { 0% { transform: translateY(-8px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(-8px); } } @keyframes ulangi { 100% { transform: translateY(-8px); } } .ngambang { margin: 15px 0 0 15px; } .ngambang:hover { animation-name: ngambang, ulangi; animation-duration: 0.3s, 1.5s; animation-delay: 0s, 0.3s; animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-direction: normal, alternate; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5); }
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 . . . :-)
