Efeito Interação Imagem Movimento Mouse

[Celso Ferreira]

Gostaria de saber como é feito o efeito de interação da imagem com o movimento do mouse exatamente como no site www.luizarcanjo.com e também www.luansantana.com.br. Não consegui encontrar na net.

Obrigado!

Editado Abril 20, 2012 por Celso Ferreira

[Celso Ferreira]

Alguma coisa errada com o meu post?

[fiote]

Tirando o seu gosto musical, não. Lol.

O primeiro foi feito em flash. O segundo parece que não. Você vai precisar do evento onMouseMove e das coordenadas do mouse. Depois disso é só manipular a div com a imagem.

Esse site aqui tem um exemplo da primeira parte (sobre o mouse): http://www.devx.com/tips/Tip/29285.

Bom desenvolvimento =)

[Lucas Kauz]

Da uma olhada em plugins relacionados ao 'parallax', ele é responsável por fazer este efeito, aqui uma boa refêrencia, acho que exatamente do que precisa:

jParallax: http://webdev.stephband.info/parallax.html

Se conseguir implementar mande o código pra cá, para ajudar quem está com o mesmo problema, boa sorte!

Qualquer dúvida ou dificuldade estou a disposição, até!

[Celso Ferreira]

Valeu demais, Lucas. Vou tentar aplicar aqui e dou retorno posteriormente.

Obrigado ao fiote também (ps: Luiz Arcanjo eu gosto, agora, Luan Santana...).

Abrçs!

[Celso Ferreira]

Achei o código mastigado pra baixar. Estou quebrando a cabeça pra configurar.

http://progtuts.info/186/create-a-parallax-website-header/

Confiram aí.

[dinohills]

Achei o código mastigado pra baixar. Estou quebrando a cabeça pra configurar.

http://progtuts.info/186/create-a-parallax-website-header/

Confiram aí.

Poste o que você e o que está acontecendo pra ficar mais claro, já que o código ta mastigado não era pra ter muito segredo.

[Celso Ferreira]

Eu estou configurando a largura da div parallax de acordo com a resolução do meu site (980 px) bem como a posição (margin left). Está tudo dentro de uma div chamada "geral" pra poder ficar centralizado.

Quando eu confiro no meu monitor full hd, fica tudo bem, mas se eu mudo a resolução do monitor, por exemplo, 1024 x 768, não fica mais centralizado.

Não consegui resolver o problema.

[chai0304]

Depois disso é só manipular a div com a imagem.