Membuat Effect Gambar Pecah With jQuery

Demo Bisa Lihat Langsung Pada Gambar Berikut, Arahkan Mouse Anda kefoto dibawah :

.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 */
    }

4. 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>

5. Simpan template
6. Pemanggilannya Pada Html :

<div class="box_container2">
<div class="images_holder2">
<div class="image_div2 left2">
<img class="box_image" src="http://picturestack.com/415/441/5V3cats1YI.jpg" style="width: 420px;" /></div>
<div class="image_div2 right2">
<img class="box_image2" src="http://picturestack.com/415/441/5V3cats1YI.jpg" style="width: 420px;" /></div>
</div>
<img class="box_image2" src="http://picturestack.com/419/787/JPocatsPmX.jpg" style="width: 420px;" /></div>

7. Selesai

Dan yang perlu diperhatikan Yang saya tandai warna biru  kawan-kawan sesuaikan dari ukuran dan gambar yang samanya, selamat mencoba. :) Please rate this article: