Home » » Efek Gambar Pecah Dengan JqueryI

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 :
    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;
    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() {
            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});

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>
<img class="box_image2" src="URL GAMBAR ANDA" style="width: 420px;" /></div>
Related Post




ShoutMix chat widget
Guest Book

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog




[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net




Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .