Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Animasi Bola Bouncing di Jquery. Pada artikel kali ini saya akan menciptakan efek animasi bola bouncing dengan menggunakan jQuery. Pada tutorial kali ini Hanya untuk sebuah posting yang menyenangkan. Efek animasi ini dibuat berdasarkan parameter yang berbeda seperti jumlah bouncing, kecepatan dan lain-lain. Dalam tutorial sebelumnya, saya telah membuat Cara Membuat Responsive Slide Show dengan JQuery.

Dalam contoh ini, saya akan membuat animasi bola basket di bagian bawah elemen DIV. Saat mengklik bola, fungsi jQuery akan dipanggil untuk menciptakan animasi yang memantul dengan bola. Jumlah memantul dan kecepatan akan diteruskan ke fungsi ini. Berdasarkan parameter  ketinggian memantul dan rasio kecepatan akan dihitung untuk menghidupkan bola menggunakan jQuery animate().

Oke untuk lebih jelasnya saya akan membuatkan script HTML dan Gaya Bola Bouncing. Script berikut ini menunjukkan HTML dan gaya yang digunakan untuk menampilkan gambar bola yang memantul. Dengan mengacu pada elemen gambar ini, fungsi animasi jQuery bouncing akan dipicu saat mengklik bola.

 

Script berikut menunjukkan fungsi jquery untuk menciptakan efek animasi yang memantul pada elemen gambar bola. Ini menerima berapa kali pemogokan harus terjadi dan kecepatan memantul sebagai parameternya. Dengan menggunakan parameter ini, tinggi memantul dihitung untuk setiap bouncing dan ditetapkan sebagai properti animasi menggunakan fungsi jQuery animate ().

 

 

Dari script di atas akan menghasilkan output seperti gambar di bawah ini:

Cara Membuat Animasi Bola Bouncing di Jquery

 

Untuk lebih jelasnya silahkan lihat Demo .

Oke itulah tadi pembahasan saya tentang Cara Membuat Animasi Bola Bouncing di Jquery semoga bermanfaat.