Déplacez l’image d’arrière-plan au passage de la souris (Single Parallax)

Je voudrais que l’image de fond bouge légèrement sur les axes X et Y lorsque la souris est dans la DIV “content-landing”, elle devrait bouger avec le mouvement de la souris. il devrait se déplacer inversement. PAR EXEMPLE. La souris se déplace vers le bas, l’image “contenu de destination” se déplace vers le haut.

HTML

CSS

 #landing-content { overflow: hidden; background-image: url(http://i.imgur.com/F2FPRMd.jpg); width: 100%; background-size: cover; background-repeat: no-repeat; max-height: 500px; border-bottom: solid; border-bottom-color: #628027; border-bottom-width: 5px; } .slider { margin-left: auto; margin-right: auto; overflow: hidden; padding-top: 200px; max-width: 1002px; } .slider img { width: 80%; padding-left: 10%; padding-right: 10%; height: auto; margin-left: auto; margin-right: auto; } 

JSFiddle http://jsfiddle.net/uMk7m/

Toute aide serait appréciée.

Vous pouvez utiliser l’événement mousemove, comme indiqué dans ce violon. http://jsfiddle.net/X7UwG/

 $('#landing-content').mousemove(function(e){ var amountMovedX = (e.pageX * -1 / 6); var amountMovedY = (e.pageY * -1 / 6); $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px'); }); 

C’est juste un exemple rapide cependant, vous devrez jouer avec les chiffres vous-même. 😉

Vous pourriez y arriver comme ça

 $(document).ready(function(){ $('#landing-content').mousemove(function(e){ var x = -(e.pageX + this.offsetLeft) / 20; var y = -(e.pageY + this.offsetTop) / 20; $(this).css('background-position', x + 'px ' + y + 'px'); }); }); 

http://jsfiddle.net/uMk7m/2/

Vérifiez ce violon. Je pense que vous trouverez ce que vous voulez. http://jsfiddle.net/Aveendra/uXPkE/

 $('#landing-content').mousemove(function(e){ $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px'); });