More than 1 year has passed since last update.

「IntersectionObserver」でスクロールでフワッとコンテンツ表示を実装してみよう

Posted at 2023-06-03

IntersectionObserverとは？

MDNによると

「交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供」
とあります。

今回は
これを使って「viewportと画像要素が重なった時に画像をフワッと表示させる方法」を開設していきます

こんな感じのやつです。スクロールするとフワッとでてくるやつ。（伝われ）

参考文献:
MDN 交差オブザーバー API
MDN IntersectionObserver()

使い方

テスト用のhtmlを用意してください。その中にimg要素を置いてください。
この時にとにかく長いテキストだったり要素を置いてimgが画面スクロールしないと見えないように配置してください。(cssとscriptを設定するのを忘れずに）

今回はこのhtmlをベースにやっていきます。
~~こんにちはが多すぎて狂気とか考えてはいけない。~~

これを使う場合、画像は適宜皆さんで差し替えてくださいね。

この後の作業はJavaScriptのファイルで行っていきます。JavaScriptファイルを作成し、
先頭に 'use strict';と記述しておいてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>My Site</title>
</head>
<body>
  <h1>靴紹介</h1>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>

  <img src="img/feature1.jpg" width="300", height="200">

  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>

  <img src="img/feature2.jpg" width="300", height="200">
  
  <script src="main.js"></script>
</body>
</html>

2 . observerは要素の変化を監視してくれるものです。監視対象を用意します。img要素を取得していきましょう

  const targets = document.querySelectorAll("img");

3 . 次に、IntersectionObserver() コンストラクターを使って IntersectionObserver オブジェクトを作っていきます。

  const observer = new IntersectionObserver();

4 . IntersectionObserver関数は引数に関数オブジェクトを必要とします。これはMDNの
IntersectionObserver()で見ることができます。
それでは次のステップで関数を定義していきます。

// MDNから参照
new IntersectionObserver(callback)
new IntersectionObserver(callback, options)

5 . 今回はこんな感じの関数を定義します

  function callBack(){
    console.log("交差したよ！");
  }

6 . IntersectionObserver()の引数の中に関数を入れていきましょう

  const observer = new IntersectionObserver(callBack);

7 . 監視対象を監視します。監視するにはこのような記述をします

  //.observeメソッドでターゲットを監視する
  observer.observe(/*ここに監視対象を記述*/);

8 . 今回はquerySelectorAllで監視対象を配列として複数取得してきたためforeachで配列の要素全てに監視を付けましょう。

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

9 . いよいよ実行です。作成したhtmlのパスをurlにコピペして実行します。
(chromeブラウザで実行します)

ページが開いたら
右クリック→検証→コンソールを開いてください
(交差したよ！が出れば成功です)

10 . 画面をスクロールします。コンソールの数値が増え、複数回関数が呼び出されていることが分かります。

observerが関数を返すときは大きく分けて3つあります。
・「画面が表示されたとき(監視を開始するとき)」
・「対象とviewportが0％重なった時」
(これはviewportに対象が入る時(in)と対象が画面外から出る時(out)の2回呼び出されます)

11 . このようなcssを用意しておきます

img{
  opacity: 0;
  transition: opacity 2.0s;
}

img.appear{
  opacity: 1;
}

12 . 監視対象と重なり交差したときだけ処理を行うようにcallback関数を書き換えましょう。重なった対象のクラスにappearを設定するように変更を加えます。

  function callBack(entrys, obs){
    entrys.forEach(entry =>{
      //isIntersectingは交差地点にいるとtrue交差地点外にいるとfakseを返す
      if(!entry.isIntersecting){
        return;
      }
      console.log("交差したよ！");
      entry.target.classList.add("appear");
    });
  }

この新しく生えてきた「entrys」と「obs」は何ぞや？って話なんですが
これはIntersectionObserverの仕様で関数オブジェクトに2つの値を渡すのが関係しています。
この二つのことに関して書くと長くなりすぎるので

entriesには交差した監視要素の配列が入っていて
obsには監視しているobserverそのものが入っている
そう考えてもらえばOKです。
entrysのisIntersectingプロパティには
交差してるのかしてないのかがtrueかfalseで入っています。
これを使って
「ページ表示時にメソッドの処理が勝手に動いてしまう」事故を未然に防いでいます。

さて、説明も終わったところで実行してみてください。もし分からないことがあればMDNなどで自分で調べながらやってみましょう。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up