IntersectionObserverでスクロールアニメーションを実装する方法

コーディングをしていると「スクロールしたら要素をふわっと表示させたい」という場面、よくありますよね。以前はjQueryのscrollイベントで実装することが多かったですが、今はバニラJSのIntersectionObserverを使うのがシンプルでおすすめです。

IntersectionObserverとは？
表示イメージ
実装コード
カスタマイズのポイント
まとめ

IntersectionObserverとは？

要素が画面内に入ったかどうかを監視してくれるブラウザのAPIです。スクロールイベントと違い、パフォーマンスへの影響が少ないのが大きなメリットです。

表示イメージ

See the Pen IntersectionObserverでスクロールアニメーションを実装する方法 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

実装コード

<div class="fade-item">ふわっと表示されます</div>
<div class="fade-item">ふわっと表示されます</div>
<div class="fade-item">ふわっと表示されます</div>

.fade-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-item.is-show {
  opacity: 1;
  transform: translateY(0);
}

const items = document.querySelectorAll('.fade-item');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show');
    }
  });
});

items.forEach((item) => {
  observer.observe(item);
});