javascript - 滚动垂直视差

Question

我正在研究简化的垂直视差(类似于 http://nikebetterworld.com )。

我有一个 quick demo working - 代码在技术上是可行的，但每次滚动后我都会对重绘产生紧张的效果 - 似乎 javascript 发生得很晚。知道为什么吗？我在脚本中看不到任何真正突出的地方。

var getYPosition = function() {
  if (typeof(window.pageYOffset) == 'number') {
    return window.pageYOffset;
  } else {
    return document.documentElement.scrollTop;
  }     
};

$(document).ready(function(){
  var sections = $(".section");
  $(window).scroll(function() {
    var x = getYPosition(),
    y = Math.floor(x / 1600),
    z = $(sections[y]).offset();
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px");
  });
});

Answer 1

看起来图像被移动了两次 - 首先是通过浏览器滚动，然后是通过您的 scroll() 处理程序。因此抖动。

通过对图像使用 position:fixed 或 background-attachment:fixed 可能会获得更清晰的效果 - 这样它们就不会受到浏览器滚动的影响，但会由 scroll() 处理程序移动。你将不再有一个效果与另一个战斗。您必须相应地修改您的 scroll() 处理程序。