JavaScriptでページスクロールアニメーションを実装する

<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll"></div>
  <div class="scroll-caption">このアニメーションは上からフェードインします。</div>
</セクション>

.js-スクロール{
  不透明度: 0;
  遷移: 不透明度 500ms;
}

.js-scroll.scrolled {
  不透明度: 1;
}

定数 scrollElements = document.querySelectorAll('.js-scroll')

scrollElements.forEach((el) => {
  el.style.不透明度 = 0
})

const elementInView = (el) => {
  const 要素 Top = el.getBoundingClientRect().top

  戻る （
    要素上端 <= (window.innerHeight || document.documentElement.clientHeight)
  ）
}

const elementInView = (el, scrollOffset = 0) => {
  const 要素 Top = el.getBoundingClientRect().top

  戻る （
    要素トップ <=
    (window.innerHeight || document.documentElement.clientHeight) - スクロールオフセット
  ）
}

const elementInView = (el, パーセンテージスクロール = 100) => {
  const 要素 Top = el.getBoundingClientRect().top

  戻る （
    要素トップ <=
    (window.innerHeight || document.documentElement.clientHeight) *
      (パーセンテージスクロール / 100)
  ）
}

const displayScrollElement = (要素) => {
  element.classList.add('スクロール')
}

定数ハンドルスクロールアニメーション = () => {
  scrollElements.forEach((el) => {
    要素がビュー内にある場合(el, 100) {
      表示スクロール要素(el)
    }
  })
}

const hideScrollElement = (要素) => {
  element.classList.remove("スクロールされた");
};

定数ハンドルスクロールアニメーション = () => {
  scrollElements.forEach((el) => {
    要素がビュー内にある場合(el, 100) {
      スクロール要素を表示します(el);
    } それ以外 {
      スクロール要素を非表示にします(el);
    }
  }

window.addEventListener('スクロール', () => {
  スクロールアニメーション処理()
})

<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll フェードイン"></div>
  <div class="scroll-caption">フェードイン効果</div>
</セクション>
<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll フェードインボトム"></div>
  <div class="scroll-caption">トップカット効果</div>
</セクション>
<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll slide-left"></div>
  <div class="scroll-caption">左からカットイン</div>
</セクション>
<セクションクラス="スクロールコンテナ">
  <div class="scroll-element js-scroll slide-right"></div>
  <div class="scroll-caption">右からカットイン</div>
</セクション>

.スクロール.フェードイン{
  アニメーション: フェードイン 1 秒、イーズイン アウト 両方;
}

.スクロールされたフェードインボトム{
  アニメーション: フェードイン下部 1 秒、イーズインアウト両方;
}

.スクロール.左スライド{
  アニメーション: 左にスライドイン、両方に 1 秒イーズインアウト。
}

.スクロール.スライド右{
  アニメーション: 右にスライドイン、1 秒ずつイーズインアウト、両方;
}

@keyframes スライドイン左 {
  0% {
    変換: translateX(-100px);
    不透明度: 0;
  }
  100% {
    変換: translateX(0);
    不透明度: 1;
  }
}

@keyframes スライドイン右 {
  0% {
    変換: translateX(100px);
    不透明度: 0;
  }
  100% {
    変換: translateX(0);
    不透明度: 1;
  }
}

@keyframes フェードインボトム {
  0% {
    変換: translateY(50px);
    不透明度: 0;
  }
  100% {
    変換: translateY(0);
    不透明度: 1;
  }
}

@keyframes フェードイン {
  0% {
    不透明度: 0;
  }
  100% {
    不透明度: 1;
  }
}

throttleTimer を false にする

const スロットル = (コールバック、時間) => {
  if (throttleTimer) 戻り値

  // 関数が繰り返し実行されないようにここでマークします throttleTimer = true

  タイムアウトを設定する(() => {
    // 指定された時間が来たら、渡されたコールバック関数 callback() を呼び出します
    スロットルタイマー = false
  }、 時間）
}

window.addEventListener('スクロール', () => {
  スロットル(ハンドルスクロールアニメーション、250)
})