テキスト下からスライド出現
見出しの文字が下から枠内へ滑り込んで現れる、雑誌の扉のような登場演出です。仕組みはシンプルで、外側の h1 に overflow:hidden をかけて見える窓を作り、内側の span を最初に translateY(110%) で枠の下へ隠しておきます。
解説
見出しの文字が下から枠内へ滑り込んで現れる、雑誌の扉のような登場演出です。仕組みはシンプルで、外側の h1 に overflow:hidden をかけて見える窓を作り、内側の span を最初に translateY(110%) で枠の下へ隠しておきます。読み込み時に @keyframes で translateY(0) まで戻すと、文字が窓の縁でマスクされながらせり上がってくる動きになります。cubic-bezier のイージングで、最後にすっと減速する上質な余韻が出ます。
向いている場面
ページを開いた瞬間に印象を残したい主見出しに合います。エディトリアルなブログのタイトル、ブランドサイトのファーストビュー、作品集の章見出しなど、一語で空気を決めたい箇所に効果的です。
- 登場の速さ：
animationの秒数を縮めるとキビキビ、伸ばすとゆったりした印象になります。 - 複数行：行ごとに
spanを分けanimation-delayをずらすと、行が順番に立ち上がる演出に発展できます。 - 配慮：読み込み直後だけ動くので負荷は軽め。
prefers-reduced-motionでは初期位置をtranslateY(0)にして即表示にすると安全です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
複数行の見出しでも使えますか
使えます。各行を span で包み、行ごとに animation-delay を少しずつ増やすと、上の行から順にスライドして現れる連続演出になります。
スクロールで見えたときに動かしたいのですが
この実装は読み込み時に一度だけ再生されます。スクロール到達で発火させたい場合は IntersectionObserver で要素が画面に入ったらクラスを付与し、そのクラスにアニメを当てる形へ拡張します。