Catatan Hadi : Membuat efek explode pada gambar

Explode merupakan salah satu teknik yang ada pada jquery UI. explode jika diartikan dalam bahasa indonesia yaitu meledakan. Dengan menggunakan teknik ini, kita akan bisa membuat gambar seolah2 meledak. Contohnya saja jika kita membuat gambar bom pada website, gambar bom tersebut masih dalam keadaan normal, tetapi jika kita melakukan klik pada tombol meledak, maka gambar bom tersebut akan pecah, seolah-olah seperti meledak. ataupun jika kita sedang jatuh cinta pada seseorang, sayangnya orang yang kita cintai itu sudah ada yang punya. tentunya membuat hati kita hancur atau patah hati. kita bisa membuat gambaran atau ungkapan melalui website, dengan membuat gambar hati yang utuh, dan ketika diklik tombol hancur, maka hati tersebut akan hancur.

pada contoh kali ini, saya akan membuat gambar hati yang akan dihancurkan.

langkah pertama, siapkan objek gambarnya terlebih dahulu.

setelah dapat gambar yang cocok.

Buatlah program untuk menampilkan gambar tersebut dan tombol untuk menghancurkan gambar tersebut.

<html>
<head>
 <title>Blog Tutorial - Explode</title>
</head>

<body>
<center>
<h2>Membuat Efek Explode</h2>
<button class="explode"> HANCUR </button>
<p><img src="gambar/love16.jpg" id="hdilove" width="400"></p>

</body>
</html>

jika program tersebut dijalankan, maka akan menghasilkan output seperti dibawah ini:

Jika anda klik tombol HANCUR, tentunya belum ada yang terjadi.

untuk itu kita harus menambhakan skript agar terjadi efek ketika tombol dklik.

sebelum itu anda harus memiliki 3 library jquery terlebih dahulu, yaitu: jquery.js, jquery.effects.core.js. dan jquery.effects.explode.js . untuk mendapatkannya dapat anda download melalui link dibawah ini:

1. jquery.js
2. jquery.effects.core.js. dan /span>jquery.effects.explode.js

Jika anda sudah memiliki library tersebut,
sekarang masih dalam program yang pertama tadi, tambhakan skript berikut tepat dibawah kode <head>

<script type="text/javascript" src="jquery/jquery.js"></script>
 <script src="jquery/jquery.effects.core.js"></script>
 <script src="jquery/jquery.effects.explode.js"></script>
 
 <script type="text/javascript">
 $(document).ready(function(){
  $(".explode").click(function(){
   $("#hdilove").effect("explode");
  });
 });
 </script>

sekarang coba anda jalankan programnya lagi,
dan klik tombol hancur. jika berhasil gambar akan hancur dan hilang, seperti gambar dibawah ini:

Catatan Hadi

Pages

Selasa, 05 Maret 2013

Membuat efek explode pada gambar

Tidak ada komentar:

Posting Komentar