Блог

Я пытаюсь анимировать статический фон, но моя проблема заключалась в том, что у меня нет такого большого фонового изображения, и я не хочу, чтобы пользователь видел внешнюю часть моего фона.

Чтобы столкнуться с этой проблемой. Я пытаюсь изменить свои значения event.pageX, когда я достигаю 1280 и выше, но я просто не могу понять, как изменить анимацию….

 $("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");
});
  

 $("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");
});
  

или для работы со всеми значениями:

 $("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");
});