Efek memantul atau yang disebut dengan bounce, yaitu salah satu teknik dari jquery untuk memantulkan suatu objek dari arah manapun dengan pantulan setinggi atau serendah apapun. Teknik ini bisa digunakan untuk bermacam-macam, misalnya membuat bola bergelinding kearah gawang, setelah ditahan kiper, bola tersebut akan kembali lagi. atapun bola basket yang akan terus memantul, bahkan anda bisa membuat orang yang sedang berdiri diatas monas, dan ketika anda klik tombol terjun, maka orang tersebut akan terjun dari atas monas.
Sebagai contoh disini kita akan membuat bola basket yang tadinya diam dan akan memantul ketika kita klik tombol pantul.
sebelumnya siapkan terlebih dahulu gambar yang akan dijadikan sebagai objek pantulan.
Contohnya disini saya menggunakan objek bola basket.
Setelah itu buatlah program untuk menampilkan objek tersebut beserta tombol untuk memantulkannya
<html> <head> <title>Blog Tutorial - efek memantul</title> </head> <body bgcolor="black"> <center><br><br> <h2><font color="white">Membuat Efek Memantul</font></h2> <button class="pantulin"> PANTULKAN BOLA BASKET </button> <p><img src="gambar/images.jpg" id="hadi"></p> </body> </html>
jika dijalankan akan menghasilkan output seperti dibawah ini:
Jika anda klik tombol "pantulkan bola basket" , tentunya tidak akan terjadi apa-apa, karena halaman tersebut masih berupa tampilan saja, untuk itu kita harus menambahkan skript agar bola basket tersebut dapat memantul saat tombol diklik.
sebelumnya anda harus memiliki tiga library jquery terlebih dahulu, yaitu : jquery,js , jquery.effect.core.js, dan jquery.effects.bounce.js . dapat anda download dilink dibawah ini:
1. JQuery.js
2. JQuery.effects.bounce.js dan Effect.core.js
password: hadi
Jika sudah anda download,
masih dalam program yang tadi, tambahkan skript berikut didalam kode <head> TAMBAHKAN DISINI </head>
<script type="text/javascript" src="jquery/jquery.js"></script> <script src="jquery/jquery.effects.core.js"></script> <script src="jquery/jquery.effects.bounce.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".pantulin").click(function(){ $("#hadi").effect("bounce", { distance: 250, direction: 'down' }); }); }); </script>
sekarang coba anda jalankan program, dan klik tombol "PANTULKAN BOLA BASKET",
jika berhasil maka bola basket tersebut akan memantul.
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia