Dalam Beberapa hari belakang ini saya selalu membuat artikel serta membahas tentang Jquery-UI, kenapa ? karena Jquery-UI merupakan salah satu plugin Jquery yang sangat awesome dan mudah untuk dipelajari (menurut saya) hehe.
Dan pada kesempatan kali ini sesuai dengan judul diatas saya akan membahas tentang Mengenal Lebih Dalam Penggunaan Efek Bounce pada Jquery-UI. kalau teman-teman rajin menjelajah digoogle pasti tidak sedikit yang membahas tentang efek bounce pada jquery ini. jadi Efek bounce ini akan membuat elemen bergetar sebanyak opsi yang ditentukan dan akan mengarahkan getaran sesuai dengan arah direksinya.
Sebenarnya tidak jauh berbeda dengan yang ada google tsb. Namun yang membedakan diartikel saya sekarang adalah kita akan menggunakan efek bounce pada sebuah div atau serta pada gambar. Penasaran ? mari kita mulai mempraktekannya.
Pertama-tama ketiklah kode HTML seperti pada gambar dibawah ini :
Didalam kode html diatas kita membuat sebuah div dengan id efek, dan langkah selanjutnya teman-teman ketik kode Style (CSS) seperti pada gambar dibawah ini :
Jika sudah, langkah selanjutnya kita masukan script Library Jquery nya seperti pada gambar dibawah ini :
Kemudian, ketik event efek jquery nya seperti pada gambar dibawah ini :
Lalu Simpan, dan coba teman-teman jalankan maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Kita sudah berhasil membuat efek bounce pada element div. Sekarang kita coba pada sebuah gambar. Teman-teman siapkan satu gambar terlebih dahulu kemudian panggil gambarnya dan maka hasilnya seperti pada kode HTML dibawah ini :
Kode diatas teman-teman sesuaikan pada nama file gambar teman-teman, dan rubah yang tadinya #efek menjadi img. Pada efek diatas kita bisa ubah directionnya atau efek menggetarnya dari atas,bawah,kiri,atau kanan. Dan juga kita dapat menentukan getarannya dengan times:1,2,3,dst.lalu durasinya 1000s.
Maka dari kode diatas menjadi seperti pada gambar dibawah ini :
Bagaimana teman-teman ? sangat mudah ya. Jadi seperti itulah contoh sederhana dalam Mengenal Lebih Dalam Penggunaan Efek Bounce pada Jquery-UI.
Kalau begitu cukup sekian dipembahasan kali ini tentang Mengenal Lebih Dalam Penggunaan Efek Bounce pada Jquery-UI semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih
The post Mengenal Lebih Dalam Penggunaan Efek Bounce pada Jquery-UI appeared first on Kursus Website Terbaik.