myParallax – Parallax com javascript com jQuery

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 copy – 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.

13 thoughts on “myParallax – Parallax com javascript com jQuery

  1. 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.

  2. 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

  3. 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

  4. 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!

  5. 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.

  6. Pingback: Imagem com zoom em Javascript e jQuery - ImageZoom | TidBits

Leave a Reply

Your email address will not be published. Required fields are marked *