スクロールリビールアニメーション
これは、スクロールして要素が画面に入った瞬間にふわっと現れる演出です。各カードは初期状態で opacity:0 と少し下げた translateY(30px) を持ち、表示領域に入ると is-visible クラスが付いて本来の位置と不透明度に transition で戻ります。
解説
これは、スクロールして要素が画面に入った瞬間にふわっと現れる演出です。各カードは初期状態で opacity:0 と少し下げた translateY(30px) を持ち、表示領域に入ると is-visible クラスが付いて本来の位置と不透明度に transition で戻ります。検知には IntersectionObserver を使い、しきい値 0.15 で「15%見えたら発火」とし、一度出た要素は unobserve で監視を外すため無駄な処理が起きません。スクロールイベントを監視する古い手法より軽く、動作も安定します。
向いている場面
- サービス紹介や実績を順に見せていくランディングページ
- 下に長いコーポレートサイトの各セクション登場演出
- 画像ギャラリーやカード一覧の段階的な表示
速さや移動量は transition の秒数と translateY の値で調整できます。動きを抑えたい利用者のために prefers-reduced-motion を見て、その場合は移動なしで即表示にする配慮を入れると安心です。なお初期状態が 透明なので、JS が動かない環境では見えなくなる点に注意し、必要なら基底を表示状態にしておきます。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
現れる速さや動く距離は調整できますか
はい。フェードの速さは transition の秒数で、下から上がる距離は translateY の値で変えられます。小さくするとさりげなく、大きくすると派手な登場になります。
一度表示された要素は再度隠れますか
いいえ。表示後は unobserve で監視を外すので、上にスクロールして戻っても再び隠れたり繰り返し発火したりせず、無駄な処理も発生しません。