视差效果使元素跟随滚动与延迟 [英] Parallax effect make elements follow scroll with delay

问题描述

我想要复制此网站：www.adidas.co.uk/climazone。这些元素似乎只会在用户滚动后稍微移动。我该如何实现呢？谢谢！

I am trying to replicate this site: www.adidas.co.uk/climazone. The elements seem to only move slightly after the user scrolls. How can I achieve this? Thank you!

推荐答案

这里是 DEMO

它实际上使用去抖/油门效应。当你向上/向下滚动时，你不应该直接修改/动画DOM元素，因为滚动事件可能会以高速率启动，在这种情况下，动画DOM元素可能会表现得很奇怪，所以为了避免这种情况，你可以使用windowAnimationFrame或setTimeout来限制/ debounce事件

Here's DEMO
Its actually uses debounce/throttle effect . When you scroll up/down you shouldn't modify/animate DOM element directly because scroll event can fire up at high rate in which case animation DOM element can behave weird so to avoid this you can use windowAnimationFrame or setTimeout to throttle/debounce event

使用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 ）方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一个重绘之前更新动画。

The Window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

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

这篇关于视差效果使元素跟随滚动与延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！