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

Question

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

Answer 1

这是 DEMO
它实际上使用了 debounce/throttle effect。当你向上/向下滚动时，你不应该直接修改/动画 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;
});