Cara Membuat Animasi Javascript HTML

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

by Hanifah Nurbaeti March 9, 2021

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 onclick="myMove()">Klik Di Sini</button> 
</p>

<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

1 Halaman Web Dasar
2 Style Pada Elemen
3 Kode Animasi
4 Buat Animasi Menggunakan JavaScript

Halaman Web Dasar

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>

Style Pada Elemen

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>

Kode Animasi

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 */ 
  }
}

Buat Animasi Menggunakan JavaScript

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 onclick="myMove()">Klik di sini</button> 
</p>

<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>