Animasi dasar

jQuery adalah perpustakaan JavaScript yang kuat yang memungkinkan Anda dengan mudah menganimasikan elemen HTML di halaman web Anda. Dalam tutorial ini, kami akan membahas animasi dasar dengan jQuery.

Langkah 1: Menambahkan jQuery ke Halaman Anda

Pastikan Anda telah menyertakan jQuery dalam halaman HTML Anda. Anda dapat mengunduhnya dari situs resmi jQuery atau menggunakan versi yang di-host secara eksternal seperti berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Langkah 2: Membuat Elemen HTML untuk Animasi

Tambahkan elemen HTML yang ingin Anda animasikan. Misalnya, kita akan menggunakan sebuah <div> dengan ID "box" sebagai contoh:

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

Langkah 3: Menambahkan Kode jQuery untuk Animasi

Anda dapat menggunakan fungsi jQuery .animate() untuk membuat animasi. Contoh animasi dasar adalah mengubah lebar dan tinggi elemen <div> secara berurutan:

$(document).ready(function() {
  $("#box").animate({
    width: '200px',
    height: '200px'
  }, 1000); // Durasi animasi dalam milidetik (1 detik dalam contoh ini)
});

Langkah 4: Menjalankan Animasi

Animasi akan dijalankan ketika halaman selesai dimuat. Pastikan Anda memanggil kode jQuery di dalam fungsi $(document).ready().

Kesimpulan

Sekarang Anda telah berhasil membuat animasi dasar dengan jQuery! Anda dapat menyesuaikan animasi ini dengan properti CSS lainnya dan menggabungkan berbagai efek animasi untuk mencapai hasil yang diinginkan.

Selamat mencoba!

PREVIOUS
NEXT