22/04/2013

Tutorial: 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á!!?

Vá ate seu HTML e procure pelo ]]></b:skin>, achou? Então cole esse código acima dele:
.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. Agora salve é va ate layout e adicione um gadget HTML/JavaScript e cole o seguinte código:
<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!!!

9 comentários:

  1. amei <3<3
    kissus ;3
    ncnosekai.blogspot.com

    ResponderExcluir
  2. que legal, gostei ^.~
    cr4zy-world.blogspot.com

    ResponderExcluir
  3. Oii, faz quanto tempo que não passo aqui!
    Adorei o post talvez eu use no lay de soreteio
    Bom, passei para avisar que assim que o WK alcançar a meta de 100 seguidores terá um sorteio de um layout. Peço que ajudem a divulgar! E convidem seus amigos a seguir o blog e ajudar na meta.
    Kisses! Julie
    withoutkawaii.blogspot.com.br/

    ResponderExcluir
  4. Anônimo24/4/13

    Volta logo Drw

    ResponderExcluir
  5. Anônimo24/4/13

    Muito legal o efeito!!!!

    ResponderExcluir
  6. Bruno24/4/13

    Lindo o lay do kuro!!!

    ResponderExcluir
  7. como por um ao lado do outro?

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram