Dalam membuat website, terkadang kita ingin menambahkan efek visual yang menarik dan dinamis seperti animasi yang bergerak mengambang naik turun secara terus menerus. Efek ini bisa dicapai dengan menggunakan CSS dan JavaScript.
Cara Pertama
Cara pertama adalah dengan menggunakan CSS. Kita bisa menambahkan class pada elemen yang ingin kita buat bergerak mengambang naik turun, lalu menambahkan properti animation. Contohnya seperti ini:
.floating-animation {
animation: floating 1s ease-in-out infinite;
}
@keyframes floating {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
Pada kode diatas kita menambahkan class “floating-animation” pada elemen yang ingin kita buat bergerak mengambang naik turun. Kemudian kita menambahkan properti animation dengan nama “floating” yang berlangsung selama 1 detik dan diulang-ulang. Pada properti @keyframes, kita menentukan posisi awal elemen, posisi yang ingin kita buat elemen bergerak naik sebesar -10px dan posisi yang ingin kita buat elemen bergerak turun kembali ke posisi awal, dengan menambahkan translateY (0)
Cara Kedua
Cara kedua adalah dengan menggunakan JavaScript. Kita bisa menambahkan event listener pada elemen yang ingin kita buat bergerak mengambang naik turun, lalu menambahkan properti style. Contohnya seperti ini:
let floatingAnimation = document.querySelector('.floating-animation');
let position = 0;
setInterval(function() {
if (position === 0) {
position = -10;
} else {
position = 0;
}
floatingAnimation.style.transform = 'translateY(' + position + 'px)';
}, 1000);
Pada kode diatas kita menentukan elemen yang ingin kita buat bergerak mengambang naik turun dengan menggunakan querySelector. Kemudian kita menambahkan variable position yang digunakan untuk menentukan posisi elemen. Kemudian kita menambahkan setInterval yang akan dijalankan setiap 1 detik. Pada setInterval kita mengecek posisi saat ini. jika posisi saat ini adalah 0 maka posisi diubah menjadi -10, jika tidak posisi kembali menjadi 0. Kemudian kita menambahkan properti style transform pada elemen dengan menambahkan posisi yang telah ditentukan sebelumnya. Dengan demikian, elemen akan bergerak naik turun secara terus menerus setiap 1 detik.
Kedua cara di atas dapat digunakan sesuai kebutuhan dan preferensi, baik itu menggunakan CSS atau JavaScript. Namun perlu diingat bahwa cara yang menggunakan JavaScript akan menambah beban pada website karena harus menjalankan script yang dituliskan. Sedangkan cara yang menggunakan CSS hanya memerlukan properti yang ditambahkan pada elemen yang ingin dibuat bergerak, sehingga lebih ringan dari segi performa.
Dalam penggunaan elemen yang bergerak mengambang, jangan lupa untuk menyesuaikan dengan desain dan konten website yang dibuat agar terlihat estetis dan tidak mengganggu pengalaman pengguna.
Contoh kode yang dapat digunakan sebagai referensi:
Menggunakan CSS
.floating-animation {
animation: floating 1s ease-in-out infinite;
}
@keyframes floating {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
Menggunakan JavaScript
let floatingAnimation = document.querySelector('.floating-animation');
let position = 0;
setInterval(function() {
if (position === 0) {
position = -10;
} else {
position = 0;
}
floatingAnimation.style.transform = 'translateY(' + position + 'px)';
}, 1000);
Dari contoh di atas, kita menambahkan class “floating-animation” pada elemen div yang berisi gambar, lalu menambahkan properti animation dan setInterval pada script javascript. Dengan demikian, elemen gambar akan bergerak naik turun secara terus menerus setiap 1 detik.
Kamu dapat melihat animasi elemen tersebut disini:
Kamu juga bisa mengunduh source code nya disini:👉https://github.com/Zalepik-Studio/ZalepikWebsite/tree/master/static/source-code/cara-membuat-animasi-bergerak-mengambang-dengan-css-dan-javascript
Sekian, Semoga Bermanfaat!
Jangan lupa share artikel ini ke orang lain, barangkali mereka membutuhkan. Jangan sungkan hubungi kami bila ada pertanyan. Atau silahkan tinggalkan komentar di bawah dan mari kita berdiskusi.