Webサイト上で、スクロールに従って何かをしたい場合、以前はスクロールイベントを使うのが常套手段でした。ですが、スクロールだとイベントが発生しすぎて、ブラウザに負担がかかったり、イベントが詰まってしまうことがありました。

そこで、新しく登場したのが「交差オブザーバー API (Intersection Observer API)」です。これは特定の要素がビューポートと交差する（＝ブラウザ上に表れたり、消えたりする）のを監視することで、アクションを起こすことができます。

ただ、設定が難しいため、まだまだスクロールイベントが使われることも多い気がしますが、今回の記事では、初級者の方に向けて設定方法を解説しています。

まだ実装したことがない方は、是非参考にしてもらうと嬉しいです。

今回のサンプルについて

今回のサンプルでは、特定の要素が画面上に表示されたら、アニメーションさせるようにしています。ただ、初級者向けという点で、説明が回りくどかったり、意訳している部分もあると思いますが、ご了承ください。

ページ内にある一つの要素が画面に表示されたらアニメーション

まずは、スクロールした際に、特定の要素が表示されたらアニメーションさせるサンプルです。

サンプルページ – 特定の要素が表示されたらアニメーションさせる

HTML

HTML、CSSについては、特別難しいことはしていません。ただ、スクロールが必要なので、スペーサーを用いることで高さを広げています。

<style>
    .wrap {
        max-width: 800px;
        margin: 30px auto;
        border: 1px solid #000;
    }
    .spacer {
        width: 100%;
        height: 1000px;
    }
    .check {
        width: 300px;
        height: 80px;
        background-color: #c2c2ff;
        margin-left: -200px;
        transition: all 5s;
    }
    .animation {
        margin-left: 0;
    }
</style>
<div class="wrap">
    <div class="spacer"></div>
    <div class="check">
        表示されたら、左から右にアニメーション
    </div>
    <div class="spacer"></div>
</div>

また、class「check」を設定したタグが画面上に表示されたら、class「animation」を同じタグに追加します。こうすることで、タグをアニメーションさせています。

JavaScript

次に、JavaScriptです。まず、コンテンツ内で、class「check」が設定されている要素を、変数に代入します。

let checks = document.querySelector('.check');

監視用のプログラムを用意します。かっこの中の「slide_animation」は、監視対象が表示された時に動く関数です。

let new_observer = new IntersectionObserver(slide_animation);

Intersection Observerを検索すると、引数が二つのサンプルを多く見かけると思います。
例えば、ブラウザの真ん中付近まで来たときにアニメーションさせたいとか、divタグがすべて表示されてからアニメーションさせたい場合は、もう一つの引数でオプションを設定するのですが、今回はオプションなし（画面に少しでも表示されたら、アニメーションを実行）で動かします。

監視対象である「checks」に対して、監視プログラムをセットします。

new_observer.observe(checks);

最後に、「checks」が画面に表示されたときに動く「slide_animation」を定義します。

function slide_animation(checks) {
    for (let check of checks) {
        if (check.isIntersecting) {
            check.target.classList.add('animation');
        }
    }
}

「if (check.isIntersecting){}」は、監視対象「check」の「isIntersecting」が「true」になったとき、その対象が表示されたことを意味します。

そして、trueになったときに、class「animation」を、表示された対象に追加します。

複数の要素に対して、Intersection Observerを設定する

次に、対象が複数の場合ですが、基本的に違いはありません。

まずは、こちらのサンプルを確認してください。

サンプルページ – 複数の要素に対してアニメーションさせる

ゆっくりスクロールしてもらうとわかりやすいと思いますが、画面に入ったら、左右からゆっくりとアニメーションするタグを、複数配置しています。

要素が一つの場合と複数の場合との違い

アニメーションの対象が一つでも複数でもそんなに変わらないので、先ほどのサンプルと違うところだけ説明します。

まず、コンテンツ内で、class「check」が設定されている要素を変数に代入していますが、今回は複数の要素になるので、「querySelectorAll()」を用います。

let checks = document.querySelectorAll('.check');

監視対象の「checks」ですが、今回は複数の項目があります。ですので、それら個々の要素に対して、監視プログラムをセットします。

for (let check of checks) {
    new_observer.observe(check);
}

残りは、変数名などが異なっている部分もありますが、ほぼ同じなので省略します。

Intersection Observerについて、細かな設定をしたいとなると難易度が上がりますが、今回のような単純な仕組みの場合は、それほど難しくありません。
何回か練習してみて、慣れてしまいましょう。