Efeito 4 Slidings

Bom dia amores, como vão? Trago mais um tutorial para vocês ele se chama Efeito 4 Slidings, achei ele no blog Mono Kawaii, o efeito e simplesmente divino, querem ver? Então vou mostrar como fazer agora. E não esqueçam de dizer o que acharam nos comentários, ok? Sua opinião é muito importante para mim. Então vamos lá!!?

Brevia do efeito

1. Vá ate seu HTML e procure pelo ]]></b:skin>, achou? Então cole esse código acima dele:

Códigos

.qitem { width:140px; height:140px; border:4px solid #222; margin:5px 5px 5px 0; background: url('http://www.queness.com/resources/html/bar/bg.gif') no-repeat; overflow:hidden; position:relative; float:left; cursor:hand; cursor:pointer; font-family: arial; } .qitem img { border:0; /* allow javascript moves the img position*/ position:absolute; z-index:200; } .qitem .caption { position:absolute; z-index:0; color:#ccc; display:block; } .qitem .caption h4 { font-size:18px; padding: 10px; margin: 0px; color: #D40C0C; text-align: center } .qitem .caption p { font-size:11px; padding: 10px; margin:0; text-align: ce;nter } .bar1, .bar2, .bar3, .bar4 { position:absolute; background-repeat: no-repeat; z-index:200; } .clear { clear:both; }

Ótimo, eu aconselho não mexer em nada a não ser na imagem "gif", cor e largura como altura estão todos destacados em negrito. 

2. Agora salve é va ate layout e adicione um gadget HTML/JavaScript e cole o seguinte código:

Códigos

<script src="http://www.queness.com/resources/html/bar/js/jquery-1.3.1.min.js"></script>
<script src="http://www.queness.com/resources/html/bar/js/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 FOTO" alt="Test 1" title="" width="140" height="140"/></a>
    <span class="caption"><h4>Título</h4><center><p>Aqui umas coisas e tal pra ficar legal</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>Aqui umas coisas e tal pra ficar legal</p></center></span>
</div>

Outra vez aconselho a não mexer em nada a não ser a url da imagem e a descrição/link, bom é isso espero que tenham gostado, sorry os erros de português. Ate a próxima!!!