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.
Danilo é coordenador de interface da AdBat/Tesla, é Corinthiano e Vegan. Gosta de correr, de jogar xadrez, tênis, e futebol de videogame (no futebol de verdade ele é muito ruim). Programa de dia na AdBat/Telsa e de noite no 
November 28th, 2008 at 8:08 am
Interessante, só que testei aqui no Firefox (2.0.0.18) em 2 PC’s diferentes e não funcionou. Só um toque, seu plugin de código encheu o código JavaScript de tags br e p, usuários iniciantes podem se confundir com isso. Abraços.
November 28th, 2008 at 8:36 am
Gostei do efeito, no Firefox 3.0.4 funcionou legal.
Abrço
November 28th, 2008 at 8:38 am
Hey Pedro.. estranho esse bug no ff2 hein.. vou ver..
valeu pelo toque…
[]s
November 28th, 2008 at 9:01 am
Fala gurii.. e ae blz? manero HEM!
depois vou testar no FF3 mas POUTS BOATS FLOATS .. fantástico HEM!
-
Show o post, gostei das referencias.. a noite vou dar uma fuçada \o/.
congratulations
November 28th, 2008 at 10:07 am
Que estranho!
Eu tinha testado no Chrome 0.4.154.25, depois no Firefox 2.0.0.18 e não funcionou!
Aí teste No IE 7.0.6001.18000 funcionou perfeitamente! E ficou muito legal!
Depois apertei Ctrl+F5 em ambos os browsers e o efeito funcionou!
Será que não tinha carregado direito pelo “onload” do jQuery?
Dá uma olhada ae!
Abs
November 28th, 2008 at 10:55 am
Apesar de não gostar desse tipo de navegação – acho que ela é bem específica, para um tipo de público bem hard user – ficou bacana a implementação!
November 28th, 2008 at 12:02 pm
Chris, não concordo .. achei muuito simples e intuitívo..
-
a noite vou testar com layout 1024 dentro de uma caixa 780 overflow:hidden; … pensei em centralizar o 1024 .. cortaria uma parte do lado esquerdo e do lado direito, ok? .. ai assim que o cara passasse o mouse do lado esquerdo o layout se posicionaria do lado esquerdo, tendo o mesmo efeito do lado direito.
nao sei.. soh tentando pra saber .. oq vc acha mestre dan?
na verdade ja vi esse tipo de coisa em algum lugar mas acho q era com clip enfim .. ate abraçao.
November 30th, 2008 at 10:30 pm
Então, gente, acho que porque o script ta rodando dentro de um iframe, o onload não está rolando direito. mas se testarem o mesmo script sem o iframe, vai dar certo, olha aqui: http://www.tidbits.com.br/download/exemplos/myParallax/myParallax.html
December 1st, 2008 at 6:20 pm
Testei no Firefox 3.0.4 no Ubuntu 8.04 e não funcionou.
Alguma explicação?
December 1st, 2008 at 9:17 pm
Então, Marcelo, como disse antes, acho que porque o script ta rodando dentro de um iframe, o onload não está rolando direito. Se testar o mesmo script sem o iframe, deve dar certo: http://www.tidbits.com.br/download/exemplos/myParallax/myParallax.html
December 2nd, 2008 at 6:48 pm
Legal Danilo!
Isso é… valeu!
February 11th, 2009 at 11:16 pm
[...] explicação pois ele já é um post antigo meu, explicando parallax e o evento mousemove>, o myParallax Parallax com javascript com jQuery. Quem não viu, veja pois é interessante, e quem já viu o [...]
December 28th, 2009 at 3:23 pm
A performance ficou legal.
Detalhe: paralaxe envolve o movimento de pelo menos dois pontos em posições diferentes (duas camadas), como no exemplo do jQparallax: http://webdev.stephband.info/parallax.html. Nesse caso é apenas scroll com mouseover.