滚动垂直视差

Question

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

我有一个快速的演示工作 - 代码在技术上有效,但我在每个滚动后对重绘有一个紧张的影响 - 似乎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()处理程序.