IntersectionObserverクラスで画面をスクロールした時、要素をふわっと出現させる。

7033 ワード
IntersectionObserver JavaScript JavaScript テキストリンク

#はじめに
ホームページなどでよく見る、下にスクロールさせると下からふわっと画像が出現するようにするにはどうすれば良いのか気になったので調べてみました！

#コード紹介&解説

このような物を作っていきます！


See the Pen dyNbgbX by Ryuji Watanabe (@ryuji0526) on CodePen.


コードはこちらになります。

main.js
  const target = document.querySelector('.target');

// ターゲットが画面領域に触れたきの処理
  function callback(entries){
    if(!entries[0].isIntersecting){
      return;
    }
      //showクラス付与
      entries[0].target.classList.add('show');
  }

  // ターゲットが画面領域に20%交差したら
  const options = {
      threshold: 0.2,
  }

  // IntersectionObserverオブジェクトのインスタンス生成
  const observer = new IntersectionObserver(callback, options);

  // observeメソッド呼び出し
  observer.observe(target);

画面領域と、ふわっとさせたい要素が交差するときに、ふわっと出現させるためのクラスを付与することで、スクロール時にふわっと要素が出現するように見せることができます。

それを可能にするのがIntersectionObserverオブジェクトです。文字通り、「交差の監視役」をしてくれます。

main.js

  // IntersectionObserverオブジェクトのインスタンス生成
  const observer = new IntersectionObserver(callback, options);

・第1引数　→ ターゲットの要素と交差が混じったときに実行されるコールバック関数です。
・第2引数　→ オブジェクトで指定することで色々な条件をつけることができるます。
今回の場合は、threshold:0.2　と指定してありますが、これはターゲットの要素との交差の割合が20%を上回るか下回ったときに第1引数で指定した関数が実行されるように指定しています。


次にobserveメソッドで何を監視するのかを指定します。 今回では、targetクラスを持つ要素を指定しています。
main.js
 //targetを監視
 observer.observe(target);

最後にcallback関数です。
main.js
  function callback(entries){
    if(!entries[0].isIntersecting){
      return;
    }
      entries[0].target.classList.add('appear');
  }

引数のentriesには、targetに関する情報がオブジェクトで渡されています。
targetをキーとして、要素名が格納されているので、

main.js
entries[0].target.classList.add('appear')

で、監視している要素にappearクラスを付与させています。
（entriesは監視している要素の数に関わらず、情報を配列で渡しています。ただ、今回監視している要素は一つだけなので、決め打ちでentries[0]としています。）

main.js
    if(!entries[0].isIntersecting){
      return;
    }

ここのif文では、target[0]のisIntersectingがfalseだったら、returnをして、処理を中断させています。
isIntersectingとは、要素が交差をしているかをture or falseで表しており、交差したときにtrueを返します。
実は、callback関数は、交差したときだけでなく、監視が始まった時にも実行されます。そのときにappearクラスが付与されてしまうと、スクロールしてもすでに要素が出現してしまっている、という状態になってしまいます。
そういった処理を防ぐために、if文で、「要素が交差したときにだけ、appearクラスを付与してね」と指定しているわけです。