Membuat Animasi Sederhana dengan jQuery Animate

Arief Siswanto

2024-11-09 13:52:17

Animasi dapat membuat tampilan website lebih dinamis dan menarik. Dengan menggunakan jQuery, kita bisa dengan mudah mengontrol animasi elemen HTML seperti perubahan ukuran, posisi, atau warna. Pada artikel ini, kita akan belajar cara membuat animasi sederhana dengan jQuery animate untuk mengubah ukuran sebuah kotak secara bertahap saat tombol ditekan.

Kode Lengkap

Di bawah ini adalah kode HTML dan jQuery yang digunakan untuk membuat animasi pada elemen div dengan kelas box:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animate JS</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(93, 168, 248);
            ;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            function animation() {
                $(".box").animate({
                    height: 500
                }, 1000, function () {
                    $(".box").animate({
                        width: 800
                    }, 1000, function () {
                        $(".box").animate({
                            height: 300
                        }, 1000, function () {
                            $(".box").animate({
                                width: 300
                            }, 1000, function () {
                                animation();
                            });
                        });
                    });
                });
            }

            $(".action").click(function () {
                animation();
            });
        });
    </script>
</head>

<body>
    <button class="action">Action</button>
    <div class="box"></div>
</body>

</html>

Penjelasan Kode

HTML dan CSS:
- div dengan kelas box adalah elemen yang akan kita animasikan. Awalnya, box memiliki lebar dan tinggi 300px, serta warna latar belakang biru (rgb(93, 168, 248)).
- Tombol Action akan digunakan untuk memicu animasi saat diklik.
JavaScript dan jQuery:
- Fungsi animation berisi rangkaian animasi yang akan diterapkan pada box. Berikut adalah detail setiap animasi:
  - Pertama, tinggi box akan berubah dari 300px ke 500px dalam waktu 1 detik (1000 milidetik).
  - Kedua, setelah perubahan tinggi selesai, lebar box akan bertambah dari 300px ke 800px dalam waktu 1 detik.
  - Ketiga, tinggi box kembali ke ukuran awal (300px) dalam 1 detik.
  - Keempat, lebar box kembali ke ukuran semula (300px) dalam 1 detik.
- Fungsi animation akan berulang (loop) dengan memanggil animation() di dalam callback animasi terakhir, sehingga box akan terus-menerus berubah ukuran.
Event Klik:
- Saat tombol Action diklik, fungsi animation akan dijalankan, memulai animasi pada box.

Cara Kerja Animasi

Pada saat tombol Action diklik, kotak biru akan mulai berubah ukuran:

Tinggi kotak akan bertambah hingga 500px.
Lebar kotak akan meluas menjadi 800px.
Kotak kemudian mengecil ke ukuran aslinya, 300px, baik lebar maupun tingginya.
Animasi akan mengulang secara otomatis.

Kesimpulan

Dengan jQuery animate, kita bisa membuat animasi kompleks hanya dengan beberapa baris kode. Selain width dan height, jQuery animate juga bisa digunakan untuk mengubah posisi dan warna elemen, atau bahkan kombinasi dari beberapa properti CSS. Cobalah untuk mengubah durasi atau ukuran kotak sesuai keinginan Anda dan lihat hasilnya!

No reply found.

Recent Topics