Efeito 4 slidings

Hooý pandas !
Hoje foi um domingo maravilhoso em minha vida, e slá eu estou sentindo muito feliz e com uma paz dentro de mim.
Enfim, ontem eu tirei o blog de hiatus - obvio todos viram - e então eu postei sobre unhas e tals. Não se vocês lembram que eu tinha falado sobre uma postagem surpresa, então essa postagem eu vou deixar para amanhã porque hoje eu vou sair e só vou voltar 18:00 e quando eu chegar eu ainda tenho que estudar e nem vai dar tempo de eu postar a surpresa. Enfim hoje eu trouxe um efeito muito legal, que eu achei no Cherry Bomb e é claro todos os créditos a ele. Vamos lá.




Primeiro de tudo, dê Ctrl+F e procure pela tag: ]]>< Assim que achar cole o seguinte código em cima da tag.

/*** EFEITO 4 SLIDING
Original por cantinho-html.tumblr.com | Editado por cherry-liah.blogspot.com ***/
.qitem {
    width:140px; /*Largura da imagem*/
    height:140px; /*Altura da imagem*/
    border:4px solid #222; /*Borda da imagem*/
    margin:5px 5px 5px 0;
    background: #000; /*Cor de fundo quando passa o mouse*/
    overflow:hidden;
    position:relative;
    float:left;
    cursor:hand; cursor:pointer;
    font-family: arial; /*Fonte do texto*/
}
    .qitem img {
        border:0;
   
        /* allow javascript moves the img position*/
        position:absolute;
        z-index:200;
    }

    .qitem .caption {
        position:absolute;
        z-index:0;
        color:#ccc; /*Cor da legenda*/
        display:block;
    }

        .qitem .caption h4 { /*Estilos do Título da legenda*/
            font-size:18px;
            padding: 10px;
            margin: 0px;
            color: #D40C0C;
            text-align: center
        }

        .qitem .caption p {
            font-size:11px; /*Tamanho da fonte do texto da legenda*/
            padding: 10px;
            margin:0;
            text-align: center;
        }

.bar1, .bar2, .bar3, .bar4 {
    position:absolute;
    background-repeat: no-repeat;
    z-index:200;
}

.clear {
    clear:both;
}

Agora crie um gadget com o nome de html/javascript e cole o seguinte código:

<script src="http://static.tumblr.com/y66747w/ZENmeendx/jquery-1.3.1.min.js"></script>
<script src="http://static.tumblr.com/y66747w/9kAmeene8/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {

    //Custom settings
    var style_in = 'easeOutBounce';
    var style_out = 'jswing';
    var speed_in = 800;
    var speed_out = 300;  

    //Top and bottom
    var top = $('.qitem').height() * (-1);
    var bottom = $('.qitem').height();

    $('.qitem').each(function () {

        //retrieve all the details of the image before removing it
        url = $(this).find('a').attr('href');
        img = $(this).find('img').attr('src');
        alt = $(this).find('img').attr('img');
        width = $(this).width() / 4;
        height = $(this).height();
       
        //remove the image and append 4 div into it
        $('img', this).remove();
        $(this).append('<div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div>');
       
        //set the image as background image to all the bars
        $(this).children('div').css('background-image','url('+ img + ')');

        //Divide the image into 4 bars and rebuild the image
        $(this).find('div.bar1').css({top:0, left:0, width:width, height:height, backgroundPosition:'0 0' });  
        $(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' });
        $(this).find('div.bar3').css({bottom:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' });  
        $(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });

    }).hover(function () {
       
        //Move those bar, 1st and 3rd move upward, 2nd and 4th move downward
        $(this).find('div.bar1').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});
        $(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});  
        $(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});
        $(this).find('div.bar4').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});  
               
    },
   
    function () {

        //Back to default position
        $(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
   
    }).click (function () {
       
        //make the whole box clickable
        window.location = $(this).find('a').attr('href');  
    });

});
</script>
<div class="qitem">
    <a href="LINK"><img src="LINK DA FDOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Legenda da imagem 1</p></center></span>
</div>
<div class="qitem">
    <a href="LINK"><img src="LINK DA FOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Legenda da imagem 2</p></center></span>
</div>
<div class="qitem">
    <a href="LINK"><img src="LINK DA FOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Legenda da imagem 3</p></center></span>

</div> 

Se quiser pode colar o código em qualquer gadget que aparece o efeito. Fácil, rápido e um efeito divo !
Crédits: Cherry Bomb