視差效果使元素跟隨滾動延遲

Question

我正在嘗試復制此站點：www.adidas.co.uk/climazone。 用戶滾動后，元素似乎只移動了一點。 我該如何實現？ 謝謝！

Answer 1

這是演示
它實際上使用了反跳/油門效果。 向上/向下滾動時，您不應直接修改/設置DOM元素的動畫，因為滾動事件會以很高的速度觸發，在這種情況下，動畫DOM元素的行為可能很怪異，因此，為了避免這種情況，您可以使用windowAnimationFrame或setTimeout限制/反跳事件

使用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搜尋

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