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:
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>2. Agora, cole acima de ]]></b:skin>:
<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>
.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;}Agora, cole em um gadget HTML Java/Script:
.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');}
<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>
Nossa que lindo. Talvez vou usar no próximo layout.
ResponderExcluirBeijos
cafecomloucura.blogspot.com
Obrigada ~
ExcluirWow, super lindo o efeito. Está na moda esses efeitos que 'abrem' a imagem de algum jeitinho diwo né? Super lindo ^//w//^
ResponderExcluirKiss kiss >3<~
# - Knight Of Demise
É bem bonito mesmo, pior que é verdade, USUASH'
ExcluirObrigada ~
que legal o efeito! vou usar no lay que estou fazendo,
ResponderExcluiramei o blog e ja estou seguindo, queria propor afiliação,
beijos, aguardo resposta.
space-female.(blogspot.com)
Obrigada :3
ExcluirVeja com a Bianca ~
Fica bem lindo! ^^
ResponderExcluirFica mesmo *-*
ExcluirMe apaixonei pelo seu blog!! Muito lindo e Original!!
ResponderExcluirEsse 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/
Obrigada :3
ExcluirVeja com a Bianca ~