【Vanilla JS】Intersection Observer APIを使用したスクロールアニメーション実装

概要

用途・要件

• シンプルなフェードイン、フェードインアップ、スライドインのアニメーション例を記載。
• ブラウザーのビューポート指定位置に要素が到達したらアニメーション用のクラスを付与。
• DEMOでは対象要素が画面下から20%の位置に到達したらクラス付与している。
• ビューポートを外れてもクラスを削除しない。
• root：デフォルト（ブラウザーのビューポート）

• 「scrollAddClass(targetElm, activeClass, optionRootMargin, optionThreshold);」のように引数を設定することで複数アニメーションを実装可能。
  • targetElm：ターゲット要素
  • activeClass：付与するクラス
  • optionRootMargin：Intersection Observerオプションの rootMargin (デフォルト：0px。単位必須。)
  • optionThreshold：Intersection Observerオプションのthreshold (0.0~1.0)
• [設定例]
  「scrollAddClass('.js-fadein', 'is-active', '0px 0px -20%', 0);」 //フェードインの場合

検証ブラウザ

• Google Chrome(最新)
• Microsoft Edge(最新)
• Firefox(最新)
• Safari(最新)

実装