Mengenal Lebih Dalam Penggunaan Efek Bounce pada Jquery-UI

Pada Beberapa hari belakang ini saya selalu merancang artikel serta membahas mengenai Jquery-UI, kenapa ? karena Jquery-UI adalah diantara plugin Jquery yang amat awesome dan gampang bagi dipelajari (menurut saya) hehe.



Dan di kesempatan kali ini sesuai dengan judul diatas saya akan membahas mengenai Mengenal Lebih Pada Pemakaian Efek Bounce di Jquery-UI. kalau teman-teman rajin menjelajah digoogle pasti tak sedikit yang membahas mengenai efek bounce di jquery ini.  jadi Efek bounce ini akan merancang faktor bergetar sebanyak opsi yang ditentukan dan akan mengarahkan getaran sesuai dengan arah direksinya.



Sebetulnya tak jauh berbeda dengan yang terdapat google tsb. Namun yang membedakan diartikel saya sekarang ini yaitu kita akan menggunakan efek bounce di sebuah div atau serta di gambar.  Penasaran ? mari kita mulai mempraktekannya.



Pertama-tama-tama ketiklah kode HTML seperti di gambar dibawah ini :



Dalam



Didalam kode html diatas kita merancang sebuah div dengan id efek, dan langkah berikutnya teman-teman ketik kode Style (CSS) seperti di gambar dibawah ini :



Dalam



Seandainya telah, langkah berikutnya kita masukan script Library Jquery nya seperti di gambar dibawah ini :



Dalam



Kemudian, ketik event efek jquery nya seperti di gambar dibawah ini :



Dalam



Lalu Simpan, dan coba teman-teman jalankan karenanya hasilnya akan menjadi seperti di gambar dibawah ini :



Dalam



Kita telah berhasil merancang efek bounce di element div. Sekarang ini kita coba di sebuah gambar. Teman-teman siapkan satu gambar terlebih dahulu kemudian panggil gambarnya dan karenanya hasilnya seperti di kode HTML dibawah ini :



Dalam



Kode diatas teman-teman sesuaikan di nama file gambar teman-teman, dan rubah yang tadinya #efek menjadi img. Di efek diatas kita dapat ubah directionnya atau efek menggetarnya dari atas,bawah,kiri,atau kanan. Dan pun kita dapat menentukan getarannya dengan times:1,2,3,dst.lalu durasinya 1000s.



Karenanya dari kode diatas menjadi seperti di gambar dibawah ini :



Dalam



Bagaimana teman-teman ? amat gampang ya. Jadi seperti demikianlah contoh sederhana pada Mengenal Lebih Pada Pemakaian Efek Bounce di Jquery-UI.



Kalau demikian itu lumayan demikianlah dipembahasan kali ini mengenai Mengenal Lebih Pada Pemakaian Efek Bounce di Jquery-UI semoga dapat bermanfaat dan hingga bertemu dipembahasan berikutnya.



Terimakasih



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Membuat Table Warna Berselang dengan PHP