Intersection Observer APIを使ったスクロールアニメーション

投稿日：

更新日：

Intersection Observer APIとは

Intersection Observerは「要素間交差の監視」です。任意の要素が祖先要素やビューポートと交差する変更を非同期で監視します。

これはGoogleも推奨する方法で、こちらでもGoolebot(=Googleのクローラー)がIntersection Observerによる遅延読み込みをサポートしていることが分かります。

今までのフェードインアニメーション

ここではスクロールすると下からふわっと要素が表示される「フェードインアニメーション」を題材にします。

jQueryを使った方法

こちらもよく見るjQueryを使った発火です。

言わずもがなですが、前提としてjQueryが必要なので読み込み量が増える分負荷はかかります。

プラグインを使った方法

inview.jsなどを使った方法もありますが、jQueryが必要なだけではなくプラグインを読み込むので前述のjQueryを使った方法以上に負荷はかかります。

Intersection Observer APIを使った方法

ここで登場するのがIntersection Observer APIを使った方法です。詳しい説明は省略しますが、下記のスクリプトを流用すればターゲットをいくつ指定しても全てに適用されます。発火後にobserver.unobserve(entry.target);を使うことで対象のターゲットを監視対象から外すことができます。

JavaScript
document.addEventListener("DOMContentLoaded", () => {
  handleScrollIn();
});

const handleScrollIn = () => {
  const targets = document.querySelectorAll(".js-scrollIn");

  const options = {
    root: null,
    rootMargin: "-20% 0px",
    threshold: [0]
  };

  const callback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("active");
        observer.unobserve(entry.target);
      }
    });
  };

  const observer = new IntersectionObserver(callback, options);

  targets.forEach((target) => {
    observer.observe(target);
  });
};

ちなみに、スクロールの行きも帰りも発火させたい場合はconst callback = ～の箇所を下記のように変更します。observer.unobserve(entry.target);を消すことで発火しても監視対象から外されないので、行きも帰りも発火するようになります。

JavaScript
const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("active");
      observer.unobserve(entry.target);
    } else {
      entry.target.classList.remove("active");
    }
  });
};

ブラウザ対応状況

まとめ

IE対応が必要無くなればポリフィルも不要になるので、今後はInterseection Observer APIを使うことでパフォーマンス的にもSEO的にも良いでしょう。

Intersection Observer APIについてのオプションなどの詳細はまたの機会にします。

参考・引用

この記事をシェアする