javascript - 跟随Y轴但不跟随X轴的Mousemove背景

我正在尝试让我的背景跟随鼠标，并且它在Y轴上成功运行，但是由于某种原因而不会跟随X轴。关于我如何获得X背景的任何建议？

例如参见小提琴

https://jsfiddle.net/7dkj6beo/

的CSS

.banner{
  text-align: center;
  background-image: url('http://maxpixel.freegreatpicture.com/static/photo/1x/Graphic-Spotlight-Material-Background-Texture-1988180.jpg');
  background-position: 50% 50%;
  background-size: cover;
  padding: 200px 0;
}

h1{
  color: #FFF;
}

JS

$('.banner').mousemove(function(e){
    var amountMovedX = (e.pageX) / 5;
    var amountMovedY = (e.pageY) / 5;
    $(this).css('background-position', amountMovedX + '% ' + amountMovedY + '%');
  });

最佳答案

一些小的变化：

.banner{
text-align: center;
background-image: url('http://maxpixel.freegreatpicture.com/static/photo/1x/Graphic-Spotlight-Material-Background-Texture-1988180.jpg');
background-position: 50% -20%;
background-size: 120%;
background-attachment: fixed;
padding: 200px;
}

和

$('.banner').mousemove(function(e){
var amountMovedX = (e.pageX) / 5;
var amountMovedY = (e.pageY) * -3;
$(this).css('background-position', amountMovedX + '% ' + amountMovedY + '%');
});

如果继续进行操作，并且将背景尺寸设为120％，并以负的Y值开头，那么您可以放心地将（X / 5，Y * -2）用作坐标，并且坐标会更加平滑，只需确保你有一个很好的高分辨率图像。

如果有人向侧面倾斜太远，这也将防止显示图像的边缘。

关于javascript - 跟随Y轴但不跟随X轴的Mousemove背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42587468/