Animasi JavaScript HTML DOM

Belajar untuk membuat animasi HTML menggunakan JavaScript.

Halaman Dasar

Untuk menunjukkan bagaimana membuat animasi HTML melalui JavaScript, kita akan menggunakan halaman web sederhana:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1>Animasi JavaScript Pertama Saya</h1>
<div id="animation">Animasi saya di sini.</div>
</body>
</html>

Buat kontainer animasi

Semua animasi harus berhubungan dengan elemen kontainer.

Contoh

<div id ="container">
    <div id ="animate">Animasi saya di sini.</div>
</div>

Tambah gaya bagi elemen

harus melalui style = "position: relative" buat elemen kontainer.

harus melalui style = "position: absoluteBuat elemen animasi.

Contoh

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

Coba Sendiri

Kode animasi

Animasi JavaScript disiapkan dengan pemrograman perubahan gaya elemen secara progresif.

Perubahan ini disebabkan oleh penomoran yang dipanggil. Saat penomoran berjeda yang kecil, animasi terlihat lancar.

Kode dasar adalah:

Contoh

var id = setInterval(frame, 5);
function frame() {
    if (/* Test apakah selesai */) {
        clearInterval(id);
    } else {
         /* Kode untuk mengubah gaya elemen */
    }
}

Buat Animasi Dengan JavaScript

Contoh

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

Coba Sendiri