Pada hari minggu ini kita akan sedikit bermain main dengan menggunakan jquery, dimana pada kesempatan kali ini kita akan belajar cara, Membuat Bola Memantul Sederhana dengan Jquery, dimana kita akan buat sebuah lingkaran, poisisi awal di atas, lalu bola itu mantul dari atas ke bawah, dan seterusnya, sampai webbrowser kita close haha, karena disini kita tidak akan mencoba membuat sebuah tombol stopnya, oke maka dari itu jangan kemana-mana simak terus ya teman-teman.

Oke untuk Membuat Bola Memantul Sederhana dengan Jquery, hal yang pertama teman-teman harus lakukan adalah membuat sebuah struktur htmlnya, yang saya punya seperti ini ya:

Oke seperti ini ya teman-teman, coba teman-teman perhatikan di dalam body saya memberikan sebuah tag div kosong, diamana tag div kosong itu akan kita buat penampung untuk kita membuat sebuah lingkarang, oke untuk mengisi tag div itu menjadi lingkaran kita style dengan CSS, CSSnya seperti ini ya:

Disini supaya kita mudah membuat lingkaran saya membuat sebuah lebar dengan tinggi sama rata ya, lalu saya berikan sebuah border-radius untuk membulatkan si div yang awal mulanya kotak persegi menjadi lingkaran, lalu saya berikan background warna merah, supaya kelihatan ya, disini saya akan meletakan sebuah lingkaranya di tengah-tengah ya, dan ketika kita ingin oper, atau menjalankan lingkarannya kita membutuhkan sebuah posistion relative ya,

Membuat Bola Memantul Sederhana dengan Jquery

sudah berhasil membuat seperti ini ya, tetapi lingkarang itu masih tidak bergerak, bagaiman cara supaya bisa bergerak, nah sekarang kita akan membutuhkan sebuah jquerynya, oke seperti ini lah tampak jquery yang saya buat:

Seperti ini ya tampak jquerynya, pertama kita buat fungsi loop terlebih dahulu, lalu di dalam itu terdapat fungsi loopingnya,kita membutuhkan animate ya teman-teman dengan kecepatan 1 detik, oke hasilnya sama seperti gambar di atas, bedanya gambar itu bisa memantul, oke silahkan teman-teman coba, dan saya rasa cukup sampai disini dulu belajar kita tentang Membuat Bola Memantul Sederhana dengan Jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.