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>