スクロールでフェードイン（IntersectionObserver）
要素が画面に入ったタイミングでふわっと現れる、スクロール連動のフェードイン演出です。初期状態では各アイテムを opacity:0 と translateY(40px) で少し下げて隠しておき、表示領域に入ったら in-view クラスを付けて transition で元の位置・不透明度へ戻します。
解説
要素が画面に入ったタイミングでふわっと現れる、スクロール連動のフェードイン演出です。初期状態では各アイテムを opacity:0 と translateY(40px) で少し下げて隠しておき、表示領域に入ったら in-view クラスを付けて transition で元の位置・不透明度へ戻します。検知には IntersectionObserver を使い、threshold や rootMargin で「どれくらい見えたら発火するか」を指定。scroll イベントを毎回計算する旧来の方法より軽く、滑らかに動きます。
使いどころ
- サービス紹介や実績セクションを順番に見せたいランディングページ
- 記事中の図版やカードを読み進めに合わせて現すブログ
- 長い縦スクロールサイトの単調さを和らげたいとき
一度表示したら unobserve で監視を解除しているため、再スクロールで再度消えたりせず無駄な処理も走りません。出方を変えたいときは translateY を translateX や scale に替えると左右からの登場やズームにできます。注意として、JavaScript が無効だと要素が透明のままになるので、prefers-reduced-motion 時は最初から表示する、あるいは no-js 用に表示するフォールバックを用意すると安全です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
scroll イベントとの違いは何ですか
IntersectionObserver はブラウザが交差判定を最適化して非同期に通知するため、scroll イベントで毎回位置を計算するより軽くカクつきにくいのが利点です。多数の要素を監視してもパフォーマンスが落ちにくいのが特徴です。
発火する位置を調整できますか
できます。threshold を 0.15 から上げると「より深く入ってから」表示され、rootMargin を変えると判定の余白を調整できます。少し早めに出したい場合は rootMargin の下マージンを緩める方向で調整します。