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

Question

我想複製此網站：www.adidas.co.uk/climazone。用戶滾動後，元素似乎只會稍微移動。我怎樣才能做到這一點？謝謝！

Answer 1

這裏的DEMO
它實際上使用debounce/throttle效果。當你向上/向下滾動時，你不應該直接修改/動畫DOM元素，因爲滾動事件可以高速啓動，在這種情況下，動畫DOM元素可能會表現怪異，所以爲了避免這種情況，可以使用windowAnimationFrame或setTimeout來限制/消除事件

用的setTimeouttaken 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（）方法TE油門lls瀏覽器，您希望執行動畫並請求瀏覽器調用指定的函數以在下一次重繪之前更新動畫。

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