javascript - Parallax effect make elements follow scroll with delay -

i trying replicate site: www.adidas.co.uk/climazone. elements seem move after user scrolls. how can achieve this? thank you!

here's demo
uses debounce/throttle effect . when scroll up/down shouldn't modify/animate dom element directly because scroll event can fire @ high rate in case animation dom element can behave weird avoid can use windowanimationframe or settimeout throttle/debounce event

throttle settimeout taken 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

the window.requestanimationframe() method tells browser wish perform animation , requests browser call specified function update animation before next repaint.

var last_known_scroll_position = 0; var ticking = false;  function dosomething(scroll_pos) {   // 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; });