Background qui bouge avec mouvement souris

Version imprimable

07/09/2015, 17h22
ParisElliot

Background qui bouge avec mouvement souris

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

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:

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>

08/09/2015, 08h32
SpaceFrog

JQuery possède des plugins pour réaliser cet effet souvent nommé parallax
http://stephband.info/jparallax/
09/09/2015, 02h07
ParisElliot

Merci beaucoup à vous ! J'ai trouvé grace à vos indication :)