2023/7/30 (更新日:2024/2/14)

“IntersectionObserver” でお望みのアニメーションの発火をコーディングする方法

Program

アニメーションは読者の視野に入ったときに効果的に動作させたいですね！

アニメーションを効果的に表示するには、発火するタイミングが重要です。

画面をスクロールしたとき、”IntersectionObserver” でアニメーションを発火するタイミングを検知します。

読者の視野に入ったことを “IntersectionObserver” で検知してアニメーションする一連の動作を、JavaScriptでコーディングします。

“IntersectionObserver” でお望みのアニメーションの発火をコーディングする方法
一度だけ “IntersectionObserver” でアニメーションの発火をコーディングする方法
実際に “IntersectionObserver” を使い、簡単なアニメーションをコーディングしてみましょう
まとめ

この記事でわかること

要素が画面に入ったとき出たときに、その要素のアニメーションを発火するタイミングを決めるJavaScriptのコーディングが書けるようになります。

１．”IntersectionObserver” でお望みのアニメーションの発火をコーディングする方法

See the Pen IntersectionObserver by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊marginがない画面の外枠で発火する例題を掲載しました。(marginの設定がcodepenで効かないので)

実現したいアニメーション

コンテンツ領域を想定したブロックをスクロールします。
画面内の設定範囲外では背景が赤色、設定範囲内では背景が緑色に表示することを実現します。

実現する手段

ブロックが、設定範囲内に出入りするタイミングを ”IntersectionObserver” で検知します。
”IntersectionObserver” の検知により、背景色をコントロールします。
”IntersectionObserver” はJavaScript で、スタイルはSCSSでコーディングします。

”IntersectionObserver” でのコーディング内容

html

<body>
  <div class="animation_target"></div>
  <div class="bg-field">
    <div></div>
  </div>
</body>

class=”animation_target”：
アニメーションの対象クラス

class=”bg-field”：
発火を目に見えるよう背景画面を表示

SCSS

body {
  width: 100%;
  height: 300vh;

  background-color: rgb(200, 200, 200);

}

body：
背景は幅100%で画面いっぱい
高さは画面300%
背景色は薄い灰色

.animation_target {
  position:relative;
  top: 150vh;
  background-color: red;
  width: 80%;
  margin:0 auto;
  height: 400px;
}

.animation_target.inview {
  background-color: green;
}

.animation_target：
アニメーションのターゲットは、
高さ150%の位置に、
高さ400px幅80%でセンター配置
画面外の初期状態で背景色は赤
(コンテンツ領域を想定)

.animation_target.inview ：
アニメーションのターゲットが画面の発火範囲内に入った状態を示す。
背景色が緑となる
(緑はアニメーションを想定)

.bg-field {
  padding: 200px 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  &>div {
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%;
  }
}

.bg-field：
背景画面
アニメーションのターゲットが、画面の上から200px、下から200pxの位置で発火するのを可視化している。
＝「　画面の上下内側　200pxに領域を確保　」

.bg-field>div：
アニメーションのターゲットが発火する領域
（通常、本文の記事が書かれる領域）
＝「　画面の上下200px以内の領域が発火の対象　」

JavaScript

const animation_target = document.querySelector('.animation_target');

今回監視したいターゲットのクラスは、 “.animation_target”
“querySelector” で、クラス“.animation_target” にふられている要素を、“animation_target” という変数に（この変数名は何でも良い）定義する。

const cb = function(entries, observer) {

    entries.forEach(entry => {

        if(entry.isIntersecting) {
            entry.target.classList.add('inview');

        } else {
            entry.target.classList.remove('inview');

        }

    });

}

「関数定義部分」
ターゲットの交差を検出した場合に実行する関数

“entries” は発火対象の要素全体
“entry” は発火されたそれぞれの要素
どの要素が発火したのか確認するため、“entries.forEach” で記述
“isIntersecting” プロパティが “true” の場合は、ターゲットが発火=領域に入った、交差した状態

発火している場合
発火している “entry” 要素に “inview” クラスを付与します。

発火していない場合
“entry” 要素に付与している “inview” クラスを削除します。

“inview” クラスによりアニメーション発火をコントロールします。

const options = {

    root: null,

    rootMargin: "-200px 0px -200px 0px",

    threshold: 0;

};

オプションの設定は必要なら記入します。

“root: null” は実質変更不要
（意味は、交差対象の親要素に指定）

“rootMargin” は初期状態から内側に境界線を設定する。
top,right,bottom,leftの順で、”px” 表示必須

“threshold” は、デフォルト状態(=0)
設定するなら追記
下降時、
入る時は、0=下部で発火 1=上部で発火
出る時は、0=上部で消火 1=下部で消火
上昇時、
入る時は、0=上部で発火 1=下部で発火
出る時は、0=下部で消火 1=上部で消火
　　　　

const io = new IntersectionObserver(cb, options);

IntersectionObserverは、アニメーションのターゲットが画面の領域と交差するのを監視している関数

コールバック関数 “cb” を “new IntersectionObserver” に渡して、
初期化：インスタンス化します。
ターゲットの交差を検出したらインスタンス化したオブジェクトを “io” という変数で実行する。

引数の “options” は無い場合は無記入とします。

io.observe(animation_target);

“io” に監視したい対象のDOM “animation_target” を登録することで、監視を始める。
“observe()” というメソッドで、ターゲットの監視を始めることで、IntersectionObserverが有効になる。

２．一度だけ “IntersectionObserver” でアニメーションの発火をコーディングする方法

実現したいアニメーション

一度発火した後、リセットするまで発火しないようにするやり方です。

画面をスクロールするたびにアニメーションをすると、忙しすぎて落ち着かず読者の目が疲れてしまいます。
その時は、画面に始めに入ってきたときだけアニメーションします。
サイトをリセットしたら再度アニメーションの実行を許可します。

実現する手段

対策は、「関数定義部分」に一文： ‘observer.unobserve()’ を追加するだけです。

”IntersectionObserver” でのコーディング内容

JavaScript

const cb = function(entries, observer) {

    entries.forEach(entry => {

        if(entry.isIntersecting) {
            entry.target.classList.add('inview');
            observer.unobserve(entry.target);

        } else {
            entry.target.classList.remove('inview');

        }

    });

}

一回入った状態で監視をやめたい場合は、

「関数定義部分」に、observer.unobserve(entry.target); を追加するのみです。

unobserve メソッドに、entry の target を格納する。
entry の target に animation_target が格納されていることになります。

登録した DOM と同じものを再登録することで、監視を解除できます。

＊html,SCSSは同じ

３．実際に “IntersectionObserver” を使い、簡単なアニメーションをコーディングしてみましょう

See the Pen IntersectionObserver-ex by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊marginがない画面の外枠で発火するアニメーションにしました。(marginの設定がcodepenで効かないので)

現したいアニメーション

コンテンツ領域を想定したブロックをスクロールします。
設定範囲内に入ったら、文章が左の欄外から中央部へ移動して表示されます。
範囲外に出たら、文章が左の欄外に移動し消えていきます。

実現する手段

ブロックが、設定範囲内に出入りするタイミングを ”IntersectionObserver” で検知します。
”IntersectionObserver” の検知により、文章の位置をコントロールします。
”IntersectionObserver” はJavaScript で、スタイルはSCSSでコーディングします。

”IntersectionObserver” でのコーディング内容

html

<body>
  <div class="animation_target">
    アニメーションが出てきます！
  </div>
  <div class="bg-field">
    <div></div>
  </div>
  <script src="main.js"></script>
</body>

class=”animation_target”：
アニメーションの対象クラス
「アニメーションが出てきます！」の文章が左からスライドして表示されます。

class=”bg-field”：
発火を目に見えるよう背景画面を表示

SCSS

.animation_target {
  position:relative;
  top: 150vh;
  text-align:center;
  font-size:40px;
  height:100px;
  line-height: 100px;
  background-color: rgb(200, 200, 0);

  transition: all 1s;
  transform: translateX(-100%);
  opacity: 0;
}

.animation_target.inview {
  transform: translateX(0%);
  opacity: 1;

}

.animation_target：
アニメーションのターゲットの初期状態

40pxのテキストを背景色薄黄色でセンター配置
高さ150%、左側に100%の位置に、透明にして配置しています。

.animation_target.inview ：
ターゲットが発火した後の位置は、
画面の中心に配置し、opacity:1 で表示します。

その変化は、１秒に設定しました。

JavaScript

const animation_target = document.querySelector('.animation_target');
const cb = function(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            entry.target.classList.add('inview');
            
        } else {         entry.target.classList.remove('inview');
        }
    });
}

const options = {
    root: null,
    rootMargin: "-200px 0px",
    threshold: 0,
};

const io = new IntersectionObserver(cb, options);
io.observe(animation_target);

１．章で説明した内容と同じです。

今回監視したいターゲットのクラスは、 “.animation_target”
“querySelector” で、クラス”.animation_target” にふられている要素を、”animation_target” という変数に（この変数名は何でも良い）定義する。

この JavaScript の部分は、ターゲットのクラス名を、合わせれば内容は同じになります。