Ultimamente tenho visto scrips interessantes em javascript simulando aquele efeito muito comum no flash o qual chamamos de parallax.
No dhteumeuleu, no CSSLab e no Stephband tem exemplos bem legais e bem complexos dessa técnica.
E essa semana, fazendo um freela, precisei criar algo nesse estilo. E acabei criando um script BEM SIMPLES que simula core do efeito.
Veja o exemplo abaixo e passe o mouse em cima:
Vou explicar como fiz:
O HTML:
<div id="container"> <div id="conteudo"> <img src="_images/parallax.jpg" alt="Parallax"/> </div> </div>
O CSS:
#container { width: 460px; height: 304px; position: relative; overflow:hidden; } #conteudo { position: absolute; left:0; top:0; }
E o javascript (usando jQuery):
$(window).load(function(){ if($('#conteudo').width()>$('#container').width()){ var pos_x = $('#conteudo').offset().left; var container = $('#container').width(); var conteudo = $('#conteudo').width(); var diferenca = conteudo - container; var metade = - parseInt(diferenca / 2); $('#container').mousemove(function(e){ x = e.pageX - pos_x; porcentagemX = parseInt(x / container * 100); left = parseInt(0 - (diferenca / 100 * porcentagemX )); $('#conteudo').css('left',left); }); $('#conteudo').animate({ 'left':metade },1000); } });
Vou explicar basicamente o que o script faz, linha a linha.
1 – Faz com que a função seja executada quando terminar de carregar a página;
2 – Verifica se a área do conteúdo é maior do que a do container pra poder aplicar o efeito;
4 a 8 – Declara variáveis com os valores dos elementos;
10 – Escreve uma função que será executada toda que passar o mouse em cima do elemento “container”;
11 e 12 – Obtem a posicao do mouse (em porcentagem) em relação a div “container”, elemplo, se o mouse tiver bem no meio do container, a posicao é de 50%, mas se o mouse tiver bem na direita do container então a posição será próxima a 100%;
13 e 14 – Com a porcentagem obtida, é só posicionar o left do conteudo. O conteúdo não precisa ser uma imagem, pode ter quaisquer elementos dentro.
17 – Para o usuário perceber o efeito, é legal centralizar o conteúdo, usando o animate do jQuery já mostra o movimento.
Apesar do exemplo bobo aqui nesse post, esse script da liberdade pra fazer efeitos mais complexos. È mais facil trabalhar em cima dessa base do que usar um plugin de jQuery com mil opções.
Pra quem achou legal, pode fazer o download do exemplo completo.