Animasi DOM: Cara Membuat dan Contoh Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 22, 2020

Bagaimana caram membuat animasi HTML menggunakan JavaScript. Berikut ini akan dijelaskan.

Section Artikel

1 Halaman Web Dasar
2 Membuat Kontainer Animasi
3 Style pada Elemen
4 Animation Code
5 Buat Animasi Menggunakan JavaScript

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>

javascript