Background qui bouge avec mouvement souris

**ParisElliot** · 07/09/2015, 17h22

Bonjour � tous,

Je souhaite int�grer des animations sur un site que je vais d�velopper. En effet, je souhaiterai faire bouger l�g�rement le background d'une section avec un hover de la souris.
Or je ne sais absolument pas quoi chercher, par ou commencer. Pouvez-vous m'aiguiller de ce cot� ?

J'ai des exemples :
- http://www.digitalhands.net/
- http://www.nitrografix.net/

Merci d'avance pour toutes les r�ponses.

PS: j'ai mis ce poste dans cette section, mais je ne sais pas si la solution sera en JavaScript...

**melka one** · 07/09/2015, 19h35

bonjour

essai ce script qui fonctionne soit avec un div soit avec le corps du document (body) et comme c'est instensiable on peut l'utilis� pour plusieurs elements tout en modifiant le sens et la vitesse

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <style type="text/css">
 
 body{
background-color:gray;
background:url(le_fond.png);
}
 
 </style>
 
<script>
 
function bg(elem,sens,vitesse){
 
	elem=="body" ? this.elem=document.body : this.elem=document.getElementById(elem)
 
	this.sens=sens;
 
	this.vitesse=vitesse;
 
	var that=this;
 
	document.documentElement.addEventListener("mousemove",function(event){that.mv(event)},false);
}
 
bg.prototype.mv = function(s){
 
	var dde=(navigator.vendor) ? document.body : document.documentElement;
 
	var setX = this.sens=="gauche" ? -(s.clientX + dde.scrollLeft) : s.clientX + dde.scrollLeft;
 
	this.elem.style.backgroundPosition=(setX/this.vitesse)+'px 0px';	
}
 
function init(){
 
	new bg("body","gauche",4);
 
}
 
window.addEventListener("load",init,false);
 
</script>
</head>
<body>
</body>
</html>