スクロール連動フェードイン
スクロールして要素が画面に入った瞬間にふわっと現れる、定番の演出です。仕組みの中心は IntersectionObserver で、対象がビューポートに2割（ threshold:.2 ）入ると reveal__box--visible クラスを付与します。
解説
スクロールして要素が画面に入った瞬間にふわっと現れる、定番の演出です。仕組みの中心は IntersectionObserver で、対象がビューポートに2割（threshold:.2）入ると reveal__box--visible クラスを付与します。初期状態は opacity:0 と translateY(30px) で少し下に沈んでおり、クラスが付くと transition で0.6秒かけて元の位置と不透明度へ戻る、という流れです。一度表示した要素は obs.unobserve で監視を解除するため、再スクロールで点滅しません。
使う場面
- ランディングページのセクションを順番に見せていきたいとき
- 実績一覧やカードを、上から読み進めるリズムに合わせて出したいとき
- 長い記事に視覚的な区切りと動きを加えたいとき
出現の向きは translateY を translateX に変えれば左右からのスライドになります。速度は transition の秒数で調整します。スクロール演出は酔いやすい人にも配慮が必要なので、prefers-reduced-motion を見て動きを弱めるか即時表示に切り替えると安全です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
古いブラウザでも動きますか？
IntersectionObserverは現行の主要ブラウザでほぼ対応していますが、非対応環境では何も起きず要素が透明のままになる恐れがあります。心配な場合は初期opacityを下げず、クラスが付いたときだけ強調する設計にすると安全です。
出てくる方向や距離を変えたいです。
CSSのtransformのtranslateY(30px)の値を変えると距離が、translateXに置き換えると左右からの動きになります。数値を大きくするほど移動量が増え、ダイナミックな印象になります。