28 de nov de 2012

Efeito Door

Boa noite, gente primeiramente quero pedir desculpas por passar alguns dias sem postar pra vocês, não foi por falta de tempo e sim falta de inspiração criatividade. Estou muito feliz pois só falta três seguidores pra bater nossa meta de 80 seguidores, estive pensando será que conseguiríamos bater a meta de cem seguidores antes do natal?
Queria pedir ajuda de vocês, se puderem trazer um amigo para nos visitar ficarei feliz. 
Então vamos ao tutorial?
Hoje trouxe um efeito que eu converti do tumblr faz um tempinho, mais esqueci de postar o tutorial aqui.
O efeito é esse aqui. Eu achei lá no HTMLuv.

Primeiro cole o seguinte código em seu css.
.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');}
 Altere onde está em negrito do tamanho que queira a imagem do efeito.
Agora cole o seguinte código em um gadget JAVA


<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><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>
Faça suas alterações, mas só altere onde está em negrito.
_Guuh

14 comentários:

  1. Que eefeito liiiiiiindo *-*

    release-ur-imagination.blogspot.com

    ResponderExcluir
  2. eu vou usar agora, ficou muito legal esse efeito, e funciona com gifs \O/
    sereifelizz.blogspot.com.br

    ResponderExcluir
  3. Amei amei amei *--*

    Beijos :*
    http://pequena-julieta.blogspot.com.br/
    VISITE!

    ResponderExcluir
  4. a faz tipo um... concurso de natal ai quando vc fizer o concurso, quando as pessoas se inscreverem vc coloca a regra para participar do concurso: consiga mais 2 seguidores para o blog.

    ResponderExcluir
  5. como assim, colar o codigo no css? n tem tag?

    ResponderExcluir
  6. o efeito é lindo! amei acho que irei usar!

    ResponderExcluir