Mover background com o mouse

[Scaico 0]

Galera, boa tarde! :D

 

O que eu gostaria de fazer é um efeito no BACKGROUND do meu site que ficasse parecido com isso:

http://www.peugeot.com.br/207/index_hb.asp

 

Sei que nesse caso da Peugeot foi feito com Flash, mas eu creio que isso possa ser feito com JS...

Provavelmente usando Scriptaculous ou JQuery, não sei.

Então vim aqui perguntar se alguém já usou ou sabe de algum lugar que fez isso usando JS (e não Flash).

 

\o

[Jair Humberto 2]

não pude ver o link,

 

mas existe no css o background-position não é?

usa uma função onmousemove e muda as regras de estilos

 

explicando de uma forma um pouco mais visivel:

document.onmousemove = function(e){
	 // da um geito de pegar a posicao do mouse aqui ou usa e.pageX, ou e.screenX ou outra
	mouse = funcao_pega_posicao_do_mouse(e);

	//este elemento é o que tem imagem de fundo
	elementotal.style.backgroundPosition = mouse.x+"px" mouse.y+"px";
}

é uma idéia. não testei

[Scaico 0]

Vou fazer uns estudos, mas eu creio que background-position não trabalha com valores em pixel! :( :(

Acho que só aceita "top" "bottom", essas coisas...

 

Se der pra usar pixel, é basicamente isso. :)

 

Valeu!

[William Bruno 1501]

Background-position trabalha com valores em pixels sim oO

você define a posição x e a posição y em pixels.

 

http://www.maujor.com/tutorial/backtut.php

A idéia é mover um background com o mouse? é isso? meio que arrastar..?

[Scaico 0]

A ideia é mover somente na horizontal...

Eu pensei em usar algo como o JQuery ou Scriptaculous porque queria dar uma sensação mais suave...

 

Basicamente, é o seguinte:

 

Estou trabalhando com resolução 1280x1024, que é a resolução de 66% das pessoas que visitam o site em questão... Mas vamos fazer de modo que 1024x768 (14% dos visitantes) não seja prejudicado. 800x600 compõe menos de 1% dos visitantes.

 

Então quero criar um background de 1200px de largura. Ele, a principio, aparecerá centralizado na tela.

O JS pegará a posição do mouse e irá mover o background conforme o mouse se move horizontalmente.

Quanto mais próximo do canto da tela estiver o mouse, mais rápido será esse movimento (isso eu acho que só consigo atravez de JQuery ou Scriptaculous, não?).

 

Um exemplo (feito em flash) pode ser visto aqui:

http://www.peugeot.com.br/207/index_hb.asp

 

Eu queria esse mesmo tipo de efeito no background.

Eu não entendo de JS o suficiente para fazer isso sozinho, do zero, mas não espero que ninguém faça o meu trabalho por mim. Hehehe...

Daí vim perguntar se alguem conhece algum lugar que já fez isso ou se por acaso existe um script semi-pronto.

 

Valeu pela atenção, William!