Élément mobile jQuery parallaxe sur le mouvement de la souris

Question

J'ai un petit problème. J'ai le code que j'ai, sur un élément de déplacement de la souris se déplace également sur les axes X et Y. Ce que je veux recevoir, c'est que l'élément ne bouge que sur l'axe X et reste en bas de la page.

J'ai essayé de supprimer toutes les chaînes avec les commandes de l'axe Y, il arrête l'élément Y en mouvement mais centre l'élément - c'est le problème principal, je veux qu'il reste en bas.

$(document).ready(function() { 
    var movementStrength = 25; 
    var height = movementStrength/$(window).height(); 
    var width = movementStrength/$(window).width(); 
    $("#top-image").mousemove(function(e){ 
     var pageX = e.pageX - ($(window).width()/2); 
     var pageY = e.pageY - ($(window).height()/2); 
     var newvalueX = width * pageX * -1 - 25; 
     var newvalueY = height * pageY * -1 - 50; 
     $('#top-image').css("background-position", newvalueX+"px  "+newvalueY+"px"); 

    }); 
}); 

Merci.

Answer 1

Je ne suis pas sûr d'avoir compris ce que vous essayez de faire exactement, mais je pense que vous essayez de garder la div # top-image au bas de la page? Si oui, vous centrant sur l'axe y avec cette ligne:

var pageY = e.pageY - ($(window).height()/2); 
var newvalueY = height * pageY * -1 - 50; 

Si vous le souhaitez au fond, il devrait ressembler à ceci:

var newValueY = e.pageY - yourImageHeight; 

Mais si vous utilisez background-position, pourquoi ne pas simplement définir background-position-x, et garder la même position de background-position-y?

$('#top-image').css("background-position-x", newvalueX + "px");