MV 通過後にヘッダー色変化
ヒーローの上では透明だったヘッダーが、メインビジュアルを抜けると白や濃紺に切り替わる演出です。ヒーロー直後に高さのない監視用の目印（センチネル）を置き、 IntersectionObserver がそれを観測します。
解説
ヒーローの上では透明だったヘッダーが、メインビジュアルを抜けると白や濃紺に切り替わる演出です。ヒーロー直後に高さのない監視用の目印（センチネル）を置き、IntersectionObserver がそれを観測します。目印が画面から外れた、つまりヒーローを通り過ぎた瞬間にヘッダーへ is-on クラスを付け外しします。色や背景は transition:background,color で滑らかに変わり、切替後は backdrop-filter:blur で背後をうっすらぼかして文字を読みやすくしています。スクロール量を毎回計算せず、交差判定だけで切り替えるため動作が軽いのが利点です。
向く場面と注意
全画面ヒーローを持つブランドサイトやランディングページで、最初は写真に溶け込み、スクロール後はナビをはっきり見せたいときに向きます。切り替わる位置は目印を置く場所で決まるので、ヒーローの高さに合わせて調整します。注意点として、ヒーロー上の透明ヘッダーは背景写真によっては文字が読みにくくなるため、薄い影や半透明の地を一枚敷くと可読性が安定します。backdrop-filter は一部の古いブラウザで効かないので、効かない環境でも成立するよう背景色を併用しておくと安全です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
色が変わる位置を調整したい。
監視用の目印（センチネル）を置く位置で決まります。ヒーローの直後ではなくもう少し下に置けば、より深くスクロールしてからヘッダー色が変わります。ヒーローの高さに合わせて調整してください。
スクロール位置で判定する方式と何が違いますか。
この実装は IntersectionObserver の交差判定だけで切り替えるため、スクロールのたびに位置を計算する方式より負荷が軽く、滑らかに動きます。仕組みもシンプルで保守しやすいのが利点です。