カーテン現れタイトル
これは上下から幕が開くようにタイトルが姿を現すドラマチックな見出し演出です。文字を clip-path:inset(50% 0 50% 0) で上下から半分ずつ隠した状態から始め、 @keyframes で inset(0 0 0 0) へと変化させて全体を表示します。
解説
これは上下から幕が開くようにタイトルが姿を現すドラマチックな見出し演出です。文字をclip-path:inset(50% 0 50% 0)で上下から半分ずつ隠した状態から始め、@keyframesでinset(0 0 0 0)へと変化させて全体を表示します。これにより中央の細い線から文字が縦に開いていくカーテンのような動きが生まれます。CSS のみで JavaScript は不要です。
イージングに鋭いcubic-bezierを使い、最初に勢いよく開いて最後に止まるため、舞台幕が上がるような緊張感が出ます。
使う場面と調整
- ヒーロー導入の大見出し、記事や作品タイトルの登場演出
- 開く速さは
animationの 1.4 秒、開始の間は遅延 0.3 秒で調整 - 外側の
overflow:hiddenがはみ出しを抑えている
注意点として、一度しか再生されない演出のため、再表示したい場面ではスクロール連動などの仕組みが別途必要です。動きを避けたい利用者向けにprefers-reduced-motionで最初から全表示にする代替を用意し、文字自体は実体の見出しに置いているので読み上げや SEO のテキストは保たれます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
開くスピードや始まるタイミングを変えられますか
変えられます。curtain h1 の animation で 1.4s が開ききるまでの時間、その後の .3s が再生開始までの遅延です。秒数を縮めると素早く開き、遅延を伸ばすとためが長くなります。開き方の勢いは cubic-bezier のカーブで調整できます。
スクロールで再度表示することはできますか
この部品自体はページ読み込み時に一度だけ再生する CSS アニメーションです。スクロールで画面に入ったときに再生したい場合は、IntersectionObserver などでクラスを付け外しして animation を発火させる仕組みを追加する必要があります。