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;}Altere onde está em negrito do tamanho que queira a imagem do efeito.
.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 o seguinte código em um gadget JAVA
Faça suas alterações, mas só altere onde está em negrito.
<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>
_Guuh
Que eefeito liiiiiiindo *-*
ResponderExcluirrelease-ur-imagination.blogspot.com
Obrigado (=
Excluireu vou usar agora, ficou muito legal esse efeito, e funciona com gifs \O/
ResponderExcluirsereifelizz.blogspot.com.br
Amei amei amei *--*
ResponderExcluirBeijos :*
http://pequena-julieta.blogspot.com.br/
VISITE!
Obrigado, visito sim (=
Excluira 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*-* Obrigado pela dica (=
ExcluirQue efeito daora *-----*
ResponderExcluirObrigado
Excluircomo assim, colar o codigo no css? n tem tag?
ResponderExcluirantes de ]]>
Excluiro efeito é lindo! amei acho que irei usar!
ResponderExcluirObrigado (=
Excluir