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.

Brevia do efeito

1. Então procure por </head>. Achou? Ótimo! Agora acima dele, coloque esse código:

Códigos

<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>

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

Códigos

.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.

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

Códigos

<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!