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
const fadeTargets = document.querySelectorAll(".js-fadeIn");

const fadeOption = {
  root: null,
  rootMargin: "10% 0px",
  threshold: [0]
};

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

const fadeObserver = new IntersectionObserver(targets, fadeOption);

fadeTargets.forEach((target) => {
  fadeObserver.observe(target);
});

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

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

ブラウザ対応状況

まとめ

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

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

参考・引用

この記事をシェアする