具有视差效果的整页滚动

Question

我想制作this site或this site之类的整页滚动效果。

似乎div以不同的速度或某种加速度移动，因此后面的div可能首先滚动，而之前的div可能随后滚动，并使后面的{{1} }就像面具一样，会在div之前隐藏一会儿。

我尝试将div与this之类的scrollIntoView行为一起使用：

smooth

现在，当滚动事件触发时，每个const content = document.querySelectorAll('section'); let index = 0; document.addEventListener('wheel', event => { var delta = event.wheelDelta; if (delta < 0) { index++; content.forEach((section, i) => { if (i === index) { toggleText(i, 'show'); section.scrollIntoView({behavior: "smooth"}); } }) } else { index--; content.forEach((section, i) => { if (i === index) { toggleText(i, 'show'); section.scrollIntoView({behavior: "smooth"}); } }) } }) 都以相同的速度移动，而后面的section暂时无法隐藏之前的section。

如何实现这种“面具”般的效果？

Answer 1

最简单的方法是在点击next或prev后添加延迟

var delay = 2500; //2.5 second

setTimeout(function() {
  //your code here
}, delay);

您的代码将在2.5秒内执行。