Efek Gambar Pecah Dengan JqueryI

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

.box_container2{
    position:relative; /* important */
    width:420px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
    height:auto; /* important */
    overflow:hidden; /* hide the content that goes out of the div */
    /*just styling bellow*/
    background: black;
    color:white;
    }
    .images_holder2{
    position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div2 {
        position:relative; /* important so we can work with the left or right indent */
        overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
        width:50%; /* make it 50% of the whole images_holder */
        float:left; /* make then inline */
    }
    .left2 img{}
    .right2 img{
        margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }

8. Simpan kode berikut diatas kode </head> :

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3panning.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
        //FOR EASING EFFECT - NOT NEEDED
        $('.box_container2').hover(function(){
          
            var width = $(this).outerWidth() / 2;
          
            $(this).find('.left2').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
            $(this).find('.right2').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
        }, function(){
          
            $(this).find('.left2').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
            $(this).find('.right2').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
          
        });
           
  });
</script>

9. Save
10. Penempaatannya pada HTML

<div class="box_container2">
<div class="images_holder2">
<div class="image_div2 left2">
<img class="box_image" src="URL GAMBAR ANDA" style="width: 420px;" /></div>
<div class="image_div2 right2">
<img class="box_image2" src="URL GAMBAR ANDA" style="width: 420px;" /></div>
</div>
<img class="box_image2" src="URL GAMBAR ANDA" style="width: 420px;" /></div>

Related Post