登場と退場 · 出てくる・消える
語ごとのマスク表示逐词遮罩揭示
- リズムがある
- 隙間から立ち上がる
- 順に現れる
見出しの各語が、見えない横の隙間から順に立ち上がります。先に出た語はすでに収まり、後ろの語は下で待っています。フェードはせず、隙間から伸び上がるだけです。
使いどころ
ファーストビューの見出し、章題、注文確認など、一言だけを伝える場所に向きます。本文やリストには使わないでください。語ごとの出現は読む速度を半分にします。
パラメータ
unit = word (en) / char (zh, ja) · shell overflow hidden · inner transform: translateY(112%) → 0 · 640ms cubic-bezier(.22,1,.36,1) · stagger 85ms
レシピ
stagger 85ms語ごとのマスク表示 → transform translateY(112%) → 0 @ 640ms cubic-bezier(.22,1,.36,1)
AI に渡す一文
この見出しを語ごとに下から立ち上げてください。各語を overflow:hidden の殻で包み、translateY(112%) で下に隠し、85ms ずつずらして 0 まで上げます。1 語あたり 640ms cubic-bezier(.22,1,.36,1)。テキストはフェードさせず、移動だけで見せてください。