Membuat Animasi Set Interval Pada Event Click Javascript

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Animasi Set Interval Pada Event Click Javascript. Dalam javascript ada dua metode untuk melakukan timing event, yaitu set interval dan set timeout. Set interval atau set timeout adalah metode yang memanggil fungsi atau mengevaluasi ekspresi pada interval tertentu dalam milidetik. Metode set Interval akan terus memanggil fungsi sampai clearInterval dipanggil, atau jendela ditutup. Sedangkan metode set timeout menjalankan fungsi hanya sekali, setelah jumlah milidetik tertentu.

Dan kali ini kita akan menggunakan metode set interval. Yang pertama untuk Membuat Animasi Set Interval Pada Event Click Javascript teman-teman harus membuat struktur htmlnya seperti pada script di bawah ini. Teman-teman bisa langsung copy saya source code yang ada di bawah.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Membuat Animasi Set Interval Pada Event Click Javascript</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
    body {
      font-family: sans-serif;
      margin: 10%;
    }

    li {cursor: pointer}
    .box{width: 50px; height: 50px;margin-right: 10px; float:left;}
  </style>
</head>
<body>

  <h3 class="display-4" id="title">Timing Event</h3>
  <p id="subTitle"> Membuat Animasi Set Interval Pada Event Click Javascript</p>
  <div class="box bg-warning"></div>
  <div class="box bg-danger"></div>
  <div class="box bg-info"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title> Membuat Animasi Set Interval Pada Event Click Javascript</title>

<style>

body {

font-family: sans-serif;

margin: 10%;

}

li {cursor: pointer}

.box{width: 50px; height: 50px;margin-right: 10px; float:left;}

</style>

</head>

<body>

<h3 class="display-4" id="title">Timing Event</h3>

<p id="subTitle"> Membuat Animasi Set Interval Pada Event Click Javascript</p>

</body>

</html>

Jika diperhatikan source code di atas, teman-teman bisa lihat ya saya menggunakan bootstrap untuk membuat struktur htmlnya. Nah teman-teman bisa download atau masukkan link bootstrapnya di dalam tag head. Jika sudah kita masu ke dalam javascriptnya. Dan berikut scriptnya ya teman-teman.

<script>
  var box = document.querySelectorAll('.box');
    box.forEach(function(div) {
      div.addEventListener('click', enlarge);
    });
    function enlarge(e) {
      var divbox = e.target;
      var interval;
      var large = 50;
      
      interval = setInterval(function() {
        large += 1;
        
        if(large >= 200) {
          large = 200;
          clearInterval(interval);
        }
        
        divbox.style.height = large + 'px';
        divbox.style.width = large + 'px';
      }, 15.000);
    }
  </script>

var box = document.querySelectorAll('.box');

box.forEach(function(div) {

div.addEventListener('click', enlarge);

});

function enlarge(e) {

var divbox = e.target;

var interval;

var large = 50;

interval = setInterval(function() {

large += 1;

if(large >= 200) {

large = 200;

clearInterval(interval);

}

divbox.style.height = large + 'px';

divbox.style.width = large + 'px';

}, 15.000);

}

</script>

Teman-teman bisa perhatikan source code di atas, dimana ketika melakukan event click pada div yang memiliki class circle maka set interval akan dijalankan dengan menambahkan lebar dan tinggi div tersebut sampai 200px. Dan jika sudah 200px maka nilai variable interval yang dikembalikan oleh setInterval digunakan sebagai parameter untuk metode clearInterval.

Demikian artikel tentang cara Membuat Animasi Set Interval Pada Event Click Javascript. Semoga bisa bermanfaat dan selamat mencoba ya teman-teman.

Membuat Animasi Set Interval Pada Event Click Javascript

Facebook DUMET School

Categories