Di bawah ini kita akan mempelajari cara membuat animasi menggunakan JavaScript.
<!DOCTYPE html> <html> <style> #myContainer { width: 400px; height: 400px; position: relative; background: blue; } #myAnimation { width: 50px; height: 50px; position: absolute; background-color: green; } </style> <body> <h1>Contoh Animasi Javascript</h1> <h2> Animasi akan bergerak di bawah sini, klik button di bawah ini !</h2> <p> <button >div id ="myContainer"> <div id ="myAnimation"></div> </div> <script> var id = null; function myMove() { var elem = document.getElementById("myAnimation"); var pos = 0; clearInterval(id); id = setInterval(frame, 10); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } } </script> </body> </html>
Section Artikel
Untuk mendemonstrasikan cara membuat animasi HTML dengan JavaScript, kita dapat menggunakan halaman web sederhana.
Contoh
<!DOCTYPE html> <html> <body> <h1>Contoh Animasi Javascript</h1> <div id="myContainer"> <div id="myAnimation">Animasinya akan ada di sini</div> </div> </body> </html>
Untuk membuat animasi menjadi mungkin, elemen animasi harus dianimasikan sesuai dengan “parent container”.
Elemen kontainer harus dibuat dengan style = “position: relative
“.
Elemen animasi harus dibuat dengan style = “position: absolute
“.
Contoh
#myContainer { width: 400px; height: 400px; position: relative; background: yellow; } #myAnimation { width: 50px; height: 50px; position: absolute; background: red; }
<!Doctype html> <html> <style> #myContainer { width: 400px; height: 400px; position: relative; background: blue; } #myAnimation { width: 50px; height: 50px; position: absolute; background: red; } </style> <body> <h1>Contoh animasi javascript</h1> <div id="myContainer"> <div id="myAnimation"></div> </div> </body> </html>
Animasi JavaScript dilakukan dengan memprogram perubahan bertahap dalam gaya elemen.
Perubahan tersebut disebut dengan pengatur waktu. Ketika interval pengatur waktu kecil, animasi terlihat terus menerus.
Kode dasarnya seperti ini :
var id = setInterval(frame, 5); function frame() { if (/* tes untuk selesai */) { clearInterval(id); } else { /* kode untuk mengubah gaya elemen */ } }
Contoh
var id = null; function myMove() { var elem = document.getElementById("myAnimation"); var pos = 0; clearInterval(id); id = setInterval(frame, 10); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } }
<!DOCTYPE html> <html> <style> #myContainer { width: 400px; height: 400px; position: relative; background: red; } #myAnimation { width: 50px; height: 50px; position: absolute; background-color: green; } </style> <body> <p> <button >