CODEWITHSUNDEEP
javascriptjqueryanimationreversemousemove
Vincent Chua
Vincent Chua

Reputation: 1007

Reverse animation in mousemove Javascript event?

I'm trying to animate a static background, but my issue was since I do not have such a big background image and I do not want user to see the outer part of my background.

To encounter this issue. I'm trying to reverse my event.pageX values when I reach 1280 and above, but I just cant figure out how to reverse the animation....

$("header .headerInnerWrapper").mousemove(function(event) {
var xPos = event.pageX;
console.log(xPos);

if(xPos>=1280){//reverse the number
    //will be 1279,1278, 1277.......
}

 bg.css('backgroundPosition', [xPos] + "px");
});

Upvotes: 2

Views: 542

Answers (1)

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

$("header .headerInnerWrapper").mousemove(function(event) {
var xPos = event.pageX;
console.log(xPos);

if(xPos>=1280){
    xPos = 2560 - xPos; // that would be 1280 - (xpos -1280);
}

 bg.css('backgroundPosition', [xPos] + "px");
});

or to work with all values:

$("header .headerInnerWrapper").mousemove(function(event) {
var xPos = event.pageX;
console.log(xPos);

if(xPos>=1280){
    xPos = Math.ceil(xPos/1280)*1280 - xPos; 
}

 bg.css('backgroundPosition', [xPos] + "px");
});

Upvotes: 1

Related Questions