テキスト文字分割リビールアニメ
見出しテキストを 1 文字ずつ分割し、下からふわっと浮かび上がらせるリビールアニメーションです。JavaScript が元の文字列を 1 文字ごとの span に組み替え、各文字へ setTimeout で 80ms ずつ遅延を付けて順番に表示します。
解説
見出しテキストを 1 文字ずつ分割し、下からふわっと浮かび上がらせるリビールアニメーションです。JavaScript が元の文字列を 1 文字ごとの span に組み替え、各文字へ setTimeout で 80ms ずつ遅延を付けて順番に表示します。文字側は CSS で初期状態を opacity:0 と translateY(20px) にしておき、transition で透明度と位置をなめらかに戻すことで、波打つような登場感が生まれます。半角スペースは幅を持つ空 span に置き換えて、単語の区切りを保っています。
向いている場面
- ヒーローセクションのキャッチコピーを印象的に登場させたいとき
- セクションのタイトルにひと手間の演出を足したいとき
- 「再生」ボタンで何度でも見せたいプレゼン的なページ
速度は遅延値 80 を小さくすると速く、大きくするとゆっくりになります。1 文字ずつ要素を生成するため、長文よりも短い見出し向きです。スクリーンリーダー利用者には分割前の文字列が読み上げられるよう、元テキストを保持しておく配慮が望ましいです。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
アニメーションの速さを変えられますか
JavaScript で各文字に 80 ミリ秒ずつ遅延を付けています。この 80 を小さくすると全体が速く、大きくするとゆっくり順番に出ます。1 文字の動き自体は CSS の transition 時間で調整できます。
日本語の見出しでも使えますか
使えます。文字単位で分割するので日本語にも対応します。ただし文字数が多いほど生成する要素が増えるため、短めのキャッチコピー向きです。