CARA MEMBUAT GAMBAR BERGERAK DENGAN JAVASCRIPT

Membuat gambar bergerak merupakan salah satu cara untuk meningkatkan estetika dan daya tarik suatu website. Kamu dapat melakukannya dengan berbagai cara, salah satunya adalah menggunakan Javascript. Berikut ini adalah langkah-langkah sederhana untuk membuat gambar bergerak dengan Javascript:

Persiapan

HTML

Pertama-tama, kamu perlu menyiapkan struktur HTML. Buat sebuah tag <img> dimana kamu akan menampilkan gambar yang ingin di-animasikan.

<img id="gambar" src="path_ke_gambar">

Javascript

Kemudian, di bagian Javascript, buat sebuah fungsi untuk mengubah posisi gambar tersebut. Sebagai contoh, kamu bisa membuat fungsi bergerak seperti ini:

let posisi = 0;
let gambar = document.getElementById("gambar");

function bergerak() {
    if (posisi == window.innerWidth) {
        posisi = 0;
    } else {
        posisi++;
    }
    gambar.style.left = posisi + "px";
}

Membuat Gambar Bergerak

Setelah menyiapkan fungsi bergerak, kamu perlu memanggil fungsi tersebut secara berkala untuk membuat gambar bergerak. Kamu bisa menggunakan fungsi setInterval untuk membuat panggilan fungsi dalam selang waktu tertentu.

setInterval(bergerak, 10);

Dengan potongan kode di atas, fungsi bergerak akan dipanggil setiap 10 milidetik, yang berarti gambar akan bergerak sejauh 1 pixel setiap 10 milidetik.

Mengubah Kecepatan Gerakan

Jika kamu ingin mengubah kecepatan gerakan, kamu bisa mengubah selang waktu dalam fungsi setInterval. Sebagai contoh, jika kamu ingin membuat gambar bergerak lebih cepat, maka kamu bisa mengurangi selang waktu.

setInterval(bergerak, 5);

Dengan cara yang sama, kamu bisa memperlambat gerakan dengan meningkatkan selang waktu.

setInterval(bergerak, 20);

Itulah langkah-langkah sederhana untuk membuat gambar bergerak dengan Javascript. Dengan menguasai teknik ini, kamu bisa menciptakan berbagai jenis animasi yang lebih menarik dan interaktif. Selamat mencoba!