要素監視（オブザーバー）

概要

observer関数は、Intersection Observer APIを使って要素の表示状態を監視し、要素が画面に表示されたタイミングでクラスを付与する機能を提供します。スクロールアニメーションや遅延読み込みなどの実装に利用できます。

基本的な使用方法

import observer from '@/assets/js/modules/utils/observer';

// 基本的な使用例
window.addEventListener('load', () => {
  observer({
    selector: '.js-observer',
    threshold: 0.1,
  });
});

API リファレンス

ObserverOptions

プロパティ	型	デフォルト値	説明
`selector`	`string`	必須	監視する要素のCSSセレクタ
`assignment`	`string`	`'is-active'`	表示時に付与するクラス名
`unobserve`	`boolean`	`true`	一度表示されたら監視を解除するかどうか
`root`	`HTMLElement \| null`	`null`	交差の基準となる要素（nullの場合はビューポート）
`rootMargin`	`string`	`'0px'`	root要素のマージンを拡張・縮小
`threshold`	`number`	`0.1`	要素のどの程度が見えたら発火するか（0.0〜1.0）

使用例

基本的なアニメーション

// 要素が10%見えたらis-activeクラスを付与
observer({
  selector: 'js-observer',
  threshold: 0.1,
});

カスタムクラス名での制御

// カスタムクラス名を使用
observer({
  selector: 'js-observer',
  assignment: 'is-visible',
  threshold: 0.2,
});

継続的な監視

// 要素が画面から出た時にクラスを削除（継続監視）
observer({
  selector: 'js-observer',
  unobserve: false,
  threshold: 0.5,
});

rootMarginを使用した早めの発火

// 要素が画面に入る100px手前で発火
observer({
  selector: 'js-observer',
  rootMargin: '100px 0px',
  threshold: 0,
});

特定のコンテナ内での監視

// 特定の要素内でのスクロールを監視
const container = document.querySelector('.scroll-container');
observer({
  selector: 'js-observer',
  root: container,
  threshold: 0.3,
});

注意事項

Intersection Observer APIを使用したブラウザネイティブな実装です。
アニメーションの実装はCSSで行い、JavaScriptはクラスの付与のみを担当します。