tutorial pengembangan web terbaru
 

JavaScript HTML DOM Animasi


Belajar membuat animasi HTML menggunakan JavaScript.


Sebuah Halaman Web Dasar

Untuk menunjukkan cara membuat animasi HTML dengan JavaScript, kita akan menggunakan sebuah halaman web sederhana:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>
Cobalah sendiri "

Buat Animasi Kontainer

Semua animasi harus relatif terhadap elemen kontainer.

Contoh

<div id ="container">
    <div id ="animate">My animation will go here</div>
</div>

Gaya Elemen

Elemen kontainer harus dibuat dengan style = "position: relative".

Unsur animasi harus dibuat dengan style = "position: absolute".

Contoh

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

Kode animasi

animasi JavaScript dilakukan oleh pemrograman perubahan bertahap dalam gaya elemen ini.

Perubahan tersebut disebut dengan timer. Ketika interval waktu kecil, animasi terlihat terus menerus.

Kode dasar adalah:

Contoh

var id = setInterval(frame, 5);

function frame() {
    if (/* test for finished */) {
        clearInterval(id);
    } else {
        /* code to change the element style */ 
    }
}

Buat Animasi Menggunakan 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';
        }
    }
}
Cobalah sendiri "