Javascript

Animasi DOM: Cara Membuat dan Contoh Codenya

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

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 >


Catur Kurnia Sari

Share
Tags: javascript