Hallo teman-teman Dumet School. Kembali lagi dengan saya di kursus website. Kali ini saya akan membahas tentang Cara Membuat Animasi Awan Bergerak Dengan Jquery. Dan metode yang saya pakai adalah metode animate yang ada di jquery.

Metode .animate () memungkinkan kita untuk membuat efek animasi pada setiap properti CSS numerik. Satu-satunya parameter yang diperlukan adalah objek polos properti CSS. Objek ini mirip dengan yang dapat dikirim ke metode .css (), kecuali bahwa rentang properti lebih terbatas. Durasi diberikan dalam milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat, bukan yang lebih cepat. Durasi default adalah 400 milidetik. String ‘cepat’ dan ‘lambat’ dapat dipasok untuk menunjukkan jangka waktu masing-masing 200 dan 600 milidetik.

Oke teman-teman untuk mengetahui Cara Membuat Animasi Awan Bergerak Dengan Jquery kita langsung saja buat struktur htmlnya dan berikut kodenya ya teman-teman.

Jika sudah selesai kita bisa masuk untuk membuat animasi di dalam script jquerynya. Dan teman-teman bisa liat scriptnya seperti di bawah ini. Lalu teman-teman letakkan sebelum penutup tag body.

Nah jika sudah selesai teman-teman bisa jalankan di browser masing-masing, maka akan terlihat gambar awan akan bergerak dari kanan ke kiri menggunakan backround position yang akan berjalan sampai -1024px dengan durasi yang sudah kita tentukan yaitu 10000 milidetik menggunakan metode .animate(). Jika animasi sudah selesai maka background position akan kembali lagi ke 0px dan mengulangi animasinya dan seterusnya begitu.

Demikian artikel tentang Cara Membuat Animasi Awan Bergerak Dengan Jquery. Sampai jumpa lagi di pembahasan berikutnya. Untuk pembahasan berikutnya saya akan membahas metode animate lagi namun dengan konsep yang berbeda. Sampai jumpa dan selamat mencoba ya teman-teman.

WhatsApp chat