Efeito Door//Antigo!


Bom dia, leitores...

Acho que uma das piores coisas é você estar fazendo uma postagem em um aparelho eletrônico sem ser o computador. Ficaria mais feliz se tivesse um photoshop.

Enfim, trouxe um tutorial, um efeito de moderadores, para falar a verdade. Ele foi pego no Great Help. Eu o achei muito lindo, e quem sabe, até nos afiliados. Visualize ele bem aqui.


1. Vá no seu HTML, procure por </head> e cole acima:
<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, cole acima de ]]></b:skin>:

.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;}
@font-face {font-family: Pixel;src: url('http://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf');}
 Agora, cole em um gadget HTML Java/Script:


<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 ></div>
<br><br>Descrição</a>
</div>



10 comentários:

  1. Nossa que lindo. Talvez vou usar no próximo layout.
    Beijos
    cafecomloucura.blogspot.com

    ResponderExcluir
  2. Wow, super lindo o efeito. Está na moda esses efeitos que 'abrem' a imagem de algum jeitinho diwo né? Super lindo ^//w//^

    Kiss kiss >3<~
    # - Knight Of Demise

    ResponderExcluir
    Respostas
    1. É bem bonito mesmo, pior que é verdade, USUASH'
      Obrigada ~

      Excluir
  3. que legal o efeito! vou usar no lay que estou fazendo,
    amei o blog e ja estou seguindo, queria propor afiliação,
    beijos, aguardo resposta.
    space-female.(blogspot.com)

    ResponderExcluir
  4. Me apaixonei pelo seu blog!! Muito lindo e Original!!
    Esse efeito achei demais talvez coloque no meu blog no próximo layout!!
    Queria saber se aceita afiliação com meu blog??
    Aqui está o link => http://thesixminutes.blogspot.com.br/

    ResponderExcluir