Efeito Blitz (Efeito Moderação)
Obs: Pra usar esse tutorial tem que ter um conhecimento médio em html, pois se tirar qualquer parte do código pode ocorrer erro.
Bom, depois de muita gente ter ido me pedir não só aqui no land, como lá no pessoal, decidi fazer um tutorial, e acabei mexendo nos códigos e descobrindo outro efeito, só avisando que os códigos são T-O-D-O-S meus, eu que fiz, elaborei e usei primeiro, e não existia algum tutorial com esse efeito antes, então nada de plágios, por favor!
Live Preview:Aqui!
Tutorial do efeito da primeira caixinha, da foto da Emma Watson:
Primeiro, cole esse código que irei postar antes da tag </head>, e se algum script seu estiver mal fechado, o efeito não irá funcionar, código:
<script>$(function() { $('.trocar').hover( function(){ $(this).children('.front').stop().animate({"top" : '200px'},1200); //Trabalha no hoverIn }, function(){ $(this).children('.front').stop().animate({"top":'0'},400); //Trabalha no hoverOut }); });</script>
Depois, coloque esse código antes da tag </style>:
.trocar img{position:absolute; top:0; left:0;} .trocar{width:200px; height:210px; position:relative; overflow:hidden; border:4px solid #ee3e8a;}
Editando esse código: Em width, você tem que colocar a largura das fotos, as fotos tem que ter o mesmo tamanho, exatamente, e em height você coloca o valor da altura, e em border é o tamanho e cor da borda rosa da foto, se quiser você pode tirar, ou se não editar. Pronto, o código esta feito. Coloque esse código onde você quiser que apareça:
<div class="trocar"><img class="back" src="urldasegundaimagem" width="200px" alt="imagem" />
<img class="front" src="urldaprimeiraimagem"width="200px" alt="imagem" /></div>
Pronto, agora vamos ao efeito da segunda imagem, da Miley, é praticamente a mesma coisa:
Cole esse código antes da tag </head>:
<script>$(function() { $('.trocar2').hover( function(){ $(this).children('.front2').stop().animate({"left" : '200px'},1200); //Trabalha no hoverIn }, function(){ $(this).children('.front2').stop().animate({"left":'0'},400); //Trabalha no hoverOut }); });</script>
E esse código antes da tag </style>:
.trocar2 img{position:absolute; top:0; left:0;} .trocar2 {width:200px; height:210px; position:relative; overflow:hidden; border:4px solid #ee3e8a;}
Editando esse código: Em width, você tem que colocar a largura das fotos, as fotos tem que ter o mesmo tamanho, exatamente, e em height você coloca o valor da altura, e em border é o tamanho e cor da borda rosa da foto, se quiser você pode tirar, ou se não editar. Pronto, o código esta feito. Coloque esse código onde você quiser que apareça:
<div class="trocar"><img class="back" src="urldasegundaimagem" width="200px" alt="imagem" />
<img class="front" src="urldaprimeiraimagem"width="200px" alt="imagem" /></div>
E pronto! Se usar, credite! Tutorial por Marcos.
