JavaScript

2022.09.08

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

JavaScriptを使い、スクロール中、任意の要素位置まできたらその要素を表示するアニメーションを実装したい。（脱jQuery）

本記事ではこのような悩みを解決。

Intersection Observer APIとCSSを使えば簡単に実装可能です。

実装方法について解説します。

Intersection Observer APIとは

Intersection Observer APIとは、ある指定した要素とビューポートの交差を監視するAPIです。

スクロールしたら要素を表示するメソッドとしてscrollメソッドが挙げられますが、Intersection Observer APIを使う事で都度関数を実行する事がなく、パフォーマンスが良いとされてます。

実装サンプル

See the Pen
Intersection Observer APIでスクロールしたら要素をアニメーション表示 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スクロールしたら要素がふわっとアニメーションで表示されてるのがわかります。

実装手順は以下の通りです。

HTMLを準備

<p class="fadeIn">任意の要素位置まできたらフェードイン表示</p>

まずは任意の要素位置で表示したいHTMLタグにクラスを付与します。

本記事では例としてfadeInクラスを付与します。

Intersection Observerを実行

  // 交差を検知したい要素
  const fadeIn = document.querySelectorAll(".fadeIn");
  // IntersectionObserverのオプションを設定
  const options = {
    rootMargin: '0px',
    threshold: 1,
  };

  // IntersectionObserverを呼び出し
  const observer = new IntersectionObserver(showElement,options);

  // fadeInクラスが付与されてる要素にたどり着いたらIntersectionObserverを実行
  fadeIn.forEach((fadeIn) => {
    observer.observe(fadeIn);
  });

  // 要素が表示されたら実行する動作
  function showElement(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 要素にactiveクラスを付与
        entry.target.classList.add("active");
      }
    });
  }

Intersection Observer APIを実行するコード例です。

まず最初に交差位置を検知したい要素（以下ターゲット）を変数指定。（今回の例ではfadeInクラス）

次にIntersection Observer APIを以下で呼び出します。

const observer = new IntersectionObserver(実行したい関数,オプション);
observer.observe(交差を検知したい要素);

Intersection Observerには以下オプションを設定できます。

rootMargin
ターゲットからの距離を指定。指定した距離から関数が実行されます。

threshold
ターゲットがどれくらいの割合で見えた場合に関数を実行。
全体を1として0～1で設定。例えば0.5を設定すると要素の半分が見えたところで関数が実行されます。

次にobserveメソッドを使ってIntersection Observerを実行する処理を記述します。

交差を検知する要素が複数ある場合はforEachを使って、要素数分observeメソッドを都度実行するようにします。

次に、ターゲットと交差したら実行したい関数を記述します。

今回のコード例では、ターゲットと交差したらその要素にactiveクラスを付与します。

isIntersectingプロパティを使う事で、ターゲットが交差したらという真偽値を判定する事が出来ます。

if文を使い、上記が真の時、actriveクラスを付与します。

CSSでアニメーションさせる

.fadeIn {
  opacity: 0;
}
.fadeIn.active {
  opacity: 1;
  animation: fadeIn 2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(100px);
    transition-duration: 1s;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
    transition-duration: 1s;
  }

最後にCSSを記述します。

opacity: 0;で最初は要素を非表示（透過100%）にします。

activeクラスが付いたらopacity: 1;とし、任意のアニメーションが実行されるようanimationプロパティを付与。

以上で実装完了です。

まとめ

Intersection Observer APIを使い、JavaScriptでスクロールしたら要素をアニメーション表示する方法について解説しました。