视差效果使元素延迟滚动

我正在尝试复制此网站：www.adidas.co.uk/climazone。这些元素似乎只在用户滚动后轻微移动。我怎样才能实现这个目标？谢谢你！

Here's DEMO http://s.codepen.io/CY5/debug/vKkELx
它实际上使用了去抖/节流效果。当你向上/向下滚动时，你不应该直接修改/动画 DOM 元素，因为滚动事件可以高速触发，在这种情况下动画 DOM 元素可能表现得很奇怪，所以为了避免这种情况，你可以使用 windowAnimationFrame 或 setTimeout 来限制/反跳事件

使用 setTimeout 进行节流 取自来源 http://upshots.org/javascript/javascript-throttle-debounce-functions

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 来源 https://developer.mozilla.org/en-US/docs/Web/Events/scroll

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;
});