1文字ずつ出現
見出しの文字が1つずつ波打つように現れる。ヒーロー見出しのインパクトに。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- ヒーロー見出しの登場
- 短いキャッチコピー（10 文字前後）
- 文字そのものを主役にしたい場面
- 避ける場面
- 本文・長文（読めるまで待たせる）
- 英単語の見出し（1文字ずつの分割で読み上げが崩れる）
- 構成要素
- スクロールヒント
- 見出し
- 1文字ごとの span
- 持っている状態
- 通常
- キーボード
スクロール（キーボードは ↑↓/PageDown で可）。操作要素は無い
- 支援技術
見出しは h2。分割前の文を aria-label に持たせ、1 文字 span は aria-hidden にして語単位で読ませる。reduced-motion では最初から全文表示
- 動き
1文字 400ms ease・20px 上昇、90ms ずつ遅延して波打つ。可視率 60% で一度だけ
デザインの要点
- 1 文字 400ms・90ms 刻み。10 文字で最後が約 1.3 秒後。それ以上の長さはキャッチコピーでも待たせる
- span は inline-block にする。inline のままだと transform が効かず、上昇の波が出ない
- 空白は nbsp に置き換える。空の span は幅 0 に潰れて単語間が詰まる
- 分割は Array.from（書記素）で行い、元の文を aria-label に残す。1 文字ずつの DOM は読み上げが崩れる
コード（コピーして使えます）
<div class="scroll-hint">↓ スクロール ↓</div>
<h2 class="reveal-text">ようこそ、ちいつるへ</h2>