具有視差效果的整頁滾動

Question

我想制作一個像這個網站或這個網站一樣的整頁滾動效果（演示在這里）。

似乎 div 正在以不同的速度或某種加速度移動，以便后面的div可以先滾動，前面的div可以稍后滾動，並使后面的div變得像一個掩碼，將之前的div隱藏一會兒.

我試圖用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暫時無法隱藏前面的section 。

如何實現這種“面具”般的效果？

Answer 1

要做到這一點最簡單的方法就只是點擊之后添加延遲next或prev

var delay = 2500; //2.5 second

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

您的代碼將在 2.5 秒內執行。