スクロールフェードアップ
要素が画面に入ってきたタイミングで、下からふわっと現れる演出です。CSSとJavaScriptを組み合わせており、普段は opacity:0 と translateY(30px) で少し下にずらして透明にしています。
解説
要素が画面に入ってきたタイミングで、下からふわっと現れる演出です。CSSとJavaScriptを組み合わせており、普段は opacity:0 と translateY(30px) で少し下にずらして透明にしています。JavaScript側の IntersectionObserver が要素の表示を監視し、画面に入った瞬間に in クラスを付けると、transition によって透明から不透明へ、下から定位置へなめらかに動きます。スクロール量を逐一計算しないため軽く、滑らかに動くのが特徴です。
使うと効果的な場面
- ランディングページで各セクションを順に見せる
- 実績や特徴のカードを読み進めに合わせて出す
- 長い記事で図や引用を印象づけたいとき
動きの距離や速さは translateY の値と transition の秒数で調整できます。多用すると画面がうるさくなるため、ここぞという要素に絞る と効果的です。注意点として、JavaScriptが無効だと要素が透明のまま見えなくなる恐れがあるため、本当に重要な情報は最初から表示しておくか、対策を入れると安全です。動きが苦手な利用者には prefers-reduced-motion で移動を止め、最初から表示する配慮が望まれます。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
出現する向きや動く距離は変えられますか
変えられます。初期状態のtranslateYの値を変えると動く距離が、横方向のtranslateXにすれば左右からの出現になります。transitionの秒数を縮めるとキビキビ、伸ばすとゆったりした印象になります。
JavaScriptが動かない環境では何が表示されますか
この演出はJavaScriptで表示を切り替えるため、無効な環境では要素が透明のまま見えなくなる可能性があります。重要な情報を載せる場合は、最初から見える状態にしておくか、表示を保証する対策を加えると安全です。