CSSとJavaScriptでスクロールアニメーションを実装[fadein/blur]

案件で実装していたものを、使い回せるようにしたのでメモ。

共通: スクロールアニメーションの処理

IntersectionObserver API という機能を利用し、スクロールによって対象要素が画面内に入ったかどうかを検出します。

交差オブザーバー API - Web API | MDN

画面内に入ったことが検出された要素には、activeClassName 変数として持っている .animated クラスが付与されます。これが追加されるとアニメーションが発火します。画面外に要素が出た場合にはクラスが削除されます。

画面内に入るかどうかを監視する要素は、 targetElements 変数で管理している .scroll-animate クラスを持つ要素です。

options についても説明します。表示エリアのルート要素としてnull（ビューポート）、ルートマージン（rootMargin）として0px、スクロール検知の閾値（threshold）として 0.5（50%）を指定しています。

整理すると次のようになります。

• .scroll-animate クラスを持つ要素は、このJSスクリプトによって画面内に入ったかどうかが監視される

• 画面内に入った場合、 .animated クラスが付与される

• 画面内から出た場合、 .animated クラスが削除される

const activeClassName = "animated";
const targetElements = document.querySelectorAll(".scroll-animate");

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.5,
};

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add(activeClassName);
    } else {
      entry.target.classList.remove(activeClassName);
    }
  });
};

const observer = new IntersectionObserver(callback, options);

targetElements.forEach((element) => {
  observer.observe(element);
});

.animated クラスが付与されたときにどのようにスタイルが変化するかについては、CSS で管理しています。それぞれのアニメーションごとに見てみます。

fadein