オープニングクロール — 動きの伝え方辞典

text

opening crawl / star wars crawl / perspective text crawl

オープニングクロール

文章を奥へ倒した面の上で等速に流し、遠ざかりながら消えていく導入演出。傾きと消失点の深さだけで「宇宙」にも「叙事詩」にもなるが、読ませる気があるかは減衰マスクの位置で決まる。

01 — Demo video

Play live →

02 — Prompt template

テキストブロックに opening crawl(star wars crawl)を実装してください。

- 外側のラッパーに perspective: {{perspective}}px と perspective-origin: 50% 25% を置き、overflow: hidden で囲う
- 内側の本文ブロックに transform-origin: 50% 100% と rotateX({{tilt}}deg) をかけ、傾けた面の上に文字を乗せる
- 本文は translateY(100%) から translateY(-160%) へ {{duration}}s の linear で流す(easeを付けると等速に見えず失速する)
- 奥(上端)は mask-image: linear-gradient(to bottom, transparent 0, #000 {{fade}}%) で溶かす。opacityで要素ごと薄めない
- 動かすのは transform のみ。top や margin のアニメーションはリフローするので使わない
- prefers-reduced-motion 時は rotateX とアニメーションを外し、傾けていない静止テキストとして読める状態にする

テキストブロックに opening crawl(star wars crawl)を実装してください。

- 外側のラッパーに perspective: {{perspective}}px と perspective-origin: 50% 25% を置き、overflow: hidden で囲う
- 内側の本文ブロックに transform-origin: 50% 100% と rotateX({{tilt}}deg) をかけ、傾けた面の上に文字を乗せる
- 本文は translateY(100%) から translateY(-160%) へ {{duration}}s の linear で流す(easeを付けると等速に見えず失速する)
- 奥(上端)は mask-image: linear-gradient(to bottom, transparent 0, #000 {{fade}}%) で溶かす。opacityで要素ごと薄めない
- 動かすのは transform のみ。top や margin のアニメーションはリフローするので使わない
- prefers-reduced-motion 時は rotateX とアニメーションを外し、傾けていない静止テキストとして読める状態にする

テキストブロックに opening crawl(star wars crawl)を実装してください。

- 外側のラッパーに perspective: {{perspective}}px と perspective-origin: 50% 25% を置き、overflow: hidden で囲う
- 内側の本文ブロックに transform-origin: 50% 100% と rotateX({{tilt}}deg) をかけ、傾けた面の上に文字を乗せる
- 本文は translateY(100%) から translateY(-160%) へ {{duration}}s の linear で流す(easeを付けると等速に見えず失速する)
- 奥(上端)は mask-image: linear-gradient(to bottom, transparent 0, #000 {{fade}}%) で溶かす。opacityで要素ごと薄めない
- 動かすのは transform のみ。top や margin のアニメーションはリフローするので使わない
- prefers-reduced-motion 時は rotateX とアニメーションを外し、傾けていない静止テキストとして読める状態にする

03 — Params

perspective(消失点までの距離 px) — 範囲 200〜900 / 初期 420
小さいほど奥行きが強く、文字が急激に潰れる。300〜500pxが「遠ざかる」と読めて字も残る範囲。900pxはほぼ平面。
tilt(面の傾き deg) — 範囲 30〜75 / 初期 58
rotateXの角度。55〜62degが原典の見え方。70degを超えると手前の行まで潰れて本文が読めない。
duration(一巡の時間 s) — 範囲 8〜40 / 初期 18
文字数に比例させる。本文3〜4段落なら60〜120sが実サイトの相場で、デモのような短文は15〜25s。速いと読ませる気がないと伝わる。
fade(奥のフェード終端 %) — 範囲 0〜60 / 初期 34
上端から何%までを透明→不透明にするか。30〜40%で「暗闇に溶ける」。0%だと奥で文字が切り落とされて安っぽくなる。

04 — Vocab

perspective — 子要素の3D変形を投影する際の、視点から面までの距離。小さいほど遠近が誇張され、奥の文字が強く潰れる。
perspective-origin — 消失点の位置。50% 25%のように上寄せにすると、文字が画面上方の一点へ吸い込まれていく。
rotateX — 横軸まわりの回転。正の角度で上端が奥へ倒れ、床に寝かせた面の上に文字が乗った状態になる。
mask-image — グラデーションで要素の不透明度を場所ごとに削る指定。奥の文字を暗闇に溶かすのに使う。opacityと違い一部だけ消せる。
linear — 等速のイージング。クロールは機械送りの見立てなので、ease系を当てると終盤で失速して安っぽくなる。

05 — NG → OK examples

言い方: 「「スターウォーズみたいに文字を流して」」

なぜNG: 傾きも消失点も速度も決まらない。奥のフェードが無いまま上端でスパッと切れる実装や、rotateXを掛けずにただ上へスクロールするだけの実装が返ってくる。読み終わる前に流れきる速度で来ることも多い。

言い方: 「「opening crawlを実装。perspective 420px、rotateX 58deg、translateYを100%→-160%へ18s linear、上端はmask-imageで34%まで透明。transformのみ、reduced-motionでは傾けず静止表示」」

なぜOK: 面の作り方(perspective+rotateX)と流し方(translateY・linear)と消え方(mask)を分けて指定している。「linear」と「mask-imageで溶かす」の2点が、それらしく見えるかどうかを決める。