Contoh Program Animasi Sederhana JavaScript

Yowatech.id – Program Animasi Sederhana JavaScript. JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. JavaScript berjalan pada client-side (di browser) dan dapat berinteraksi dengan HTML dan CSS untuk menambahkan interaksi dan dinamika pada halaman web. JavaScript juga dapat digunakan untuk membuat aplikasi web server-side menggunakan Node.js.

JavaScript memiliki banyak library dan framework populer seperti jQuery, React, Angular, dan lainnya. JavaScript sangat fleksibel dan dapat digunakan untuk berbagai jenis proyek, seperti membuat animasi, event handling, dan memproses data.

Contoh Program Animasi Sederhana JavaScript

Untuk membuat animasi menggunakan JavaScript, kita dapat menggunakan method seperti setInterval() atau requestAnimationFrame(). Berikut adalah contoh sederhana membuat animasi menggunakan JavaScript:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    var box = document.querySelector("#box");
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
      if (pos == 350) {
        clearInterval(id);
      } else {
        pos++;
        box.style.left = pos + "px";
      }
    }
  </script>
</body>
</html>

Output Yang dihasilkan dari program yang diatas:

Program di atas akan menampilkan sebuah kotak merah yang bergerak dari kiri ke kanan seiring berjalannya waktu. Animasi akan berhenti setelah posisi kotak mencapai 350px. Kode ini menggunakan setInterval() untuk memanggil function frame setiap 5 miliseconds sekali dan clearInterval() untuk menghentikan animasi setelah posisi mencapai 350px.

Pentup

Dengan memanfaatkan JavaScript, kita dapat membuat animasi yang interaktif dan menambahkan dinamika pada halaman web. Animasi bisa dibuat dengan menggunakan berbagai method seperti setInterval() atau requestAnimationFrame(). JavaScript juga memiliki banyak library dan framework populer seperti jQuery, Greensock, dan lainnya yang mempermudah membuat animasi.

Dengan berkreativitas dan menggabungkan JavaScript dengan HTML dan CSS, kita dapat membuat halaman web yang menarik dan interaktif.

google News

Contoh Program Animasi Sederhana JavaScript

Related Posts: