Efek Gambar Pecah dengan Jquery

Demo Disini

bagaimana??? anda tertarik??? berikut adalah script simple dari penggunaan fungsi jquery di atas :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$(".pecah").hide("explode",
{pieces:19},6000);});
$("#show").click(function(){
$(".pecah").show("explode",
{pieces:19},6000)
;});});
</script>
<style type="text/css">
.pecah{margin-left:200px;}#show(text-align:center;)</style>

<div class="pecah"><div id="hide">
<img src="MASUKAN URL GAMBAR DI SINI"/>

<button id="show">Kembalikan gambarnya!!!</button>
</div></div>

yg warna ijo ganti dengan url image anda  sedangkan yang berwarna pink

{pieces:19},6000);});

adalah pecahan dan kecepatan... anda juga dapat mengkreasikan dengan box shadow 

untuk box-shadow anda bisa berkunjung kesini

0 komentar:

Post a Comment