视差效果使元素跟随滚动延迟答案

【问题标题】：Parallax effect make elements follow scroll with delay视差效果使元素跟随滚动延迟
【发布时间】：2016-05-28 17:45:17
【问题描述】：

我正在尝试复制此站点：www.adidas.co.uk/climazone。用户滚动后，元素似乎只会稍微移动。我怎样才能做到这一点？谢谢！

【问题讨论】：

标签： javascript jquery html css parallax

【解决方案1】：

这里是DEMO
它实际上使用 debounce/throttle 效果。当您向上/向下滚动时，您不应该直接修改/动画 DOM 元素，因为滚动事件可能会以高速率触发，在这种情况下动画 DOM 元素的行为可能会很奇怪，因此为避免这种情况，您可以使用 windowAnimationFrame 或 setTimeout 来限制/去抖动事件

使用 setTimeout 进行节流 taken from Source

Function.prototype.debounce = function(threshold){
    var callback = this;
    var timeout;
    return function() {
        var context = this, params = arguments;
        window.clearTimeout(timeout);
        timeout = window.setTimeout(function() {
            callback.apply(context, params);
        }, threshold);
    };
};

function animLoop(){
 ....
}
var test=animLoop.deboune(50);
$(window).on('scroll',test);

Window.requestAnimationFrame() MDN Scource

Window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定函数以在下一次重绘之前更新动画。

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});

【讨论】：