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):
$(document).ready(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 é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, futebol, javascript, programação, e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, javascript, xhtml, css, jquery, webstandards, seo, sql, oo, etc. E já fez sites para espn, fila, umbro, fgv, pirelli, petrobras, etc. Veja o 
Belinha é arquiteta da informação na Tesla, tem problemas com bicicletas e com carnÃvoros. Também é geek, mas se aventura pelas atividades do lar, cozinheira de final de semana, tem dificuldades quando o if da variavél "pessoas para comer" for maior que 2. Nesse caso, o alert é inevitável...