01/02/2013

Tutorial: Efeito door

||

Yooo meus ninjas, como vão? Trago um tutu que já tinha visto a bastante tempo, mas como sou cabeça de vento sempre esquecia de postar. Ele se chama "Efeito Door", achei ele em uma de minhas parceiras o KT . Caso queiram dar uma olhada basta clicar no link mais abaixo. Bacana né? Então vamos aprender como se faz.

Blá blá vá ate seu HTML, então procure por </head>. Achou? Ótimo! Agora acima dele, coloque esse código:


<script src="http://static.tumblr.com/rozpbz7/nFim53lu5/jquery.js"></script>
<script src="http://static.tumblr.com/rozpbz7/tcom53lvc/easing.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
        $('.box_containere').hover(function(){
                        var width = $(this).outerWidth() / 2;
                        $(this).find('.left').animate({ right : width },{queue:false,duration:300});
            $(this).find('.right').animate({ left : width },{queue:false,duration:300});
        }, function(){
            $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
            $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
        });
        
        $('.box_container3').hover(function(){
            
            var width = $(this).outerWidth() / 2;
            
            $(this).find('.left3').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:800});
            $(this).find('.right3').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:800});
        }, function(){
            
            $(this).find('.left3').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:800});
            $(this).find('.right3').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:800});
            
        });
             
  });
</script>


Agora procure pela tag  ]]></b:skin>, e acima dele adicione esse código:

.box_container3{position:relative;width:LARGURA DA IMGpx;height:TAMANHO DA IMGpx;overflow:hidden;   background: url(http://static.tumblr.com/wdf0zke/aKfmbzusw/bg.png) no-repeat;color:white;font-family:'pixel';font-size:8px;text-transform:uppercase;text-align:center;display:inline-block;border:2px solid #851e2f;}
.box_container3 a{color:#fff;}
.images_holder3{position:absolute;}
.image_div3 {position:relative;overflow:hidden;width:50%;float:left;}    .right3 img{margin-left: -100%;z-index:50px;}

Agora vamos entender um pouco o código, a parte em negrito é a largura e altura de sua imagem. A parte em itálico e o background a texturinha que aparecer atrás ao passar o mouse, a que está em vermelho e a cor dar borda. Depois de arrumar todo seu código, salve e vá ate seu Layout.

Abra um gadget de java script, e dentro dele adicione isso:

<div class='box_container3'>
<a href="LINK">
<div class='images_holder3'>
<div class='image_div3 left3'><img src='URL DA IMG'/></div>
<div class='image_div3 right3'><img src='URL DA IMG'/></div>
</div><div style="clear:both"></div>
<br><br>Descrição</a>
</div>

 Arrume as partes em negrito e prontinho!

6 comentários:

  1. Ameei o efeito *--------------*

    ResponderExcluir
  2. Respostas
    1. Yo Oak eu rebloguei de vc mas coloquei créditos ok ^^
      Thanks por comentar

      Excluir
  3. Muito legal o efeito.
    Mas tentei usá-lo e me ocorreu o seguinte erro.
    http://i.imgur.com/vAIU5PR.jpg
    As imagens não estão ficando alinhadas umas acima das outras, se você puder me ajudar.

    ResponderExcluir
    Respostas
    1. Provavelmente seja o "div" experimente remove lo de uma imagem para outra e adicionar só quiser fazer uma quebra de linha.

      Excluir

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