Bagaimana caram membuat animasi HTML menggunakan JavaScript. Berikut ini akan dijelaskan.
Section Artikel
Halaman Web Dasar
Untuk mendemonstrasikan cara membuat animasi HTML dengan JavaScript, kita akan mulai menggunakan halaman web sederhana.
Contoh:
<!DOCTYPE html> <html> <body> <h1> Animasi JavaScript Pertama Saya </h1> <div id = "animation"> Animasi saya akan ditempatkan di sini </div> </body> </html>
Membuat Kontainer Animasi
Semua animasi harus berhubungan dengan elemen kontainer.
Contoh:
<div id ="container"> <div id ="animate">My animation will go here</div> </div>
Style pada Elemen
Elemen wadah harus dibuat dengan style = “position: relative”.
Elemen animasi harus dibuat dengan style = “position: absolute”.
Contoh:
<!Doctype html> <html> <style> #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background: red; } </style> <body> <h2> Animasi JavaScript Pertama Saya </h2> <div id="container"> <div id="animate"></div> </div> </body> </html>
Animation Code
Animasi JavaScript dilakukan dengan memprogram perubahan bertahap dalam Style elemen.
Perubahan tersebut disebut dengan pengatur waktu. Jika interval pengatur waktu kecil, animasi terlihat terus menerus.
Kode dasarnya adalah sebagai berikut.
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:
<!DOCTYPE html> <html> <style> #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } </style> <body> <p><button onclick="myMove()">Click disini</button></p> <div id ="container"> <div id ="animate"></div> </div> <script> 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"; } } } </script> </body> </html>