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

Question

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

Answer 1

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

设置

超时从源获取的限制

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