今回は、IntersectionObserverを使用して簡単な動きを付ける方法をご紹介します。
完全備忘録なので、もし不備等ございましたら優しくご指摘いただけると嬉しいです笑

IntersectionObserverを呼び出す

CDNなどを読み込む必要はないので、早速呼び出す方法をコードでご紹介します。

//ターゲット(監視対象)の要素を変数itemに格納
const item = document.querySelector(".item");　
const callback = function() {　
   console.log('監視しています！');
}

//new演算子を使用して初期化
const io = new IntersectionObserver(callback);　
//item要素の監視を開始
io.observe(item);　

上記がIntersectionObserverを使用するための基本的なコードです。
画面内にitem要素が《入った時》と《出た時》両方のタイミングでコンソールに「監視しています!」という文言が表示されます。

画面内に入った時と出た時で挙動を変える

ある要素が画面内に入った時に、特定の要素を表示させてみます。

//ターゲット(監視対象)の要素を変数wrapperに格納
const wrapper = document.querySelector(".wrapper");
//アニメーションさせたい要素を変数itemに格納
const item = document.querySelector(".item");

//entriesをループさせて、if文で挙動を分岐
function callback(entries) {
    entries.forEach(entry => {
      if(entry.isIntersecting) {
        item.style.opacity = 1;
      } else {
        item.style.opacity = 0;
      }
    });
  }

const observer = new IntersectionObserver(callback);
observer.observe(wrapper);

ある要素(wrapper)が画面内に入って来たら、itemのopacityは1に、wrapperが画面から出たらopacityは0になります。

isIntersectingというメソッドを使用して、画面に入っている時はtrue、画面から出た時にfalseを返しています。

例えば、opacityだけではなくclassListを使用してクラスを付与することで様々なアニメーションを加えることも可能です。

指定できるオプション

IntersectionObserverでは、3つのオプションを指定することができます。

root

rootでは、ターゲットの監視を行う範囲の指定ができます。
指定しない場合のデフォルトは、ビューポート（表示されている画面の範囲）となります。

const options = {
  //wrapper クラスを指定
  root: document.querySelector('.wrapper'),
}

こちらのコードでは、wrapperクラスを持つ要素がターゲットの監視対象範囲となります。

rootMargin

監視対象範囲からのmarginを指定することができます。
例えば、10pxを指定した場合rootの範囲の上下左右10px内側が交差位置になります。
指定方法はmarginとほぼ同じですが、値はpxと%のみ使用可能です。
また、0を指定する場合でもpxや%を記述しないとエラーになります。
デフォルト値は0です。

const options = {
  rootMargin: '10px 0px'
}

こちらのコードでは、rootの監視対象範囲から上下10pxのrootMarginを取ります。

threshold

ターゲットが監視対象範囲にどれくらい入ったらコールバック関数を呼び出すかを指定します。
値は0~1で指定可能です。
0は、ターゲットの要素が1pxでも監視対象範囲に入ればコールバック関数を呼び出します。
0.5は、ターゲットの要素の半分が監視対象範囲に入った段階でコールバック関数を呼び出します。
1は、ターゲットの要素全体が監視対象範囲に入った段階でコールバック関数を呼び出します。
また、配列での指定も可能で[0, 0.5, 1]と指定した場合は、ターゲットが監視対象範囲に入った時、半分入った時、要素全体が入った時にコールバック関数を呼び出します。
デフォルト値は0です。

const options = {
  threshold: 1
};

オプションを設定した場合の呼び出し方

IntersectionObserverにオプションを設定した場合は以下のように呼び出しをします。

//ターゲット(監視対象)の要素を変数itemに格納
const item = document.querySelector(".item");　

//オプションを設定
const options = {
  rootMargin: '10px',
  threshold: 1
};

const callback = function() {　
   console.log('監視しています！');
}

//new演算子を使用して初期化
const io = new IntersectionObserver(callback, options);　
//item要素の監視を開始
io.observe(item);　

まず、optionsという定数に指定したいオプションを記述します。
そして、IntersectionObserverを初期化するコードの第二引数に先ほどオプションを設定した定数名を記述します。

これで、IntersectionObserverでオプションを使用することができます。

まとめ

IntersectionObserverは読み込みなどが必要ないので、とても手軽に使えるなと感じました。
GSAPのScrollTriggerを使用してスクロールのアニメーションをつけることが多かったのですが、シンプルな動きを実装したい時にはIntersectionObserverを積極的に使っていきたいです。

これから色々と試してみて、また気づいたことがあれば記事にします！