テキスト分割フェードインアニメーション
テキスト分割フェードインは、見出しを 1 文字ずつ分解し、少しずつ時間をずらして下からふわっと現れさせる演出です。JavaScript が文字列を 1 文字ずつ span に包み直し、各文字の animation-delay を順番に増やすことで、波打つように連なって表示されます。
解説
テキスト分割フェードインは、見出しを 1 文字ずつ分解し、少しずつ時間をずらして下からふわっと現れさせる演出です。JavaScript が文字列を 1 文字ずつ span に包み直し、各文字の animation-delay を順番に増やすことで、波打つように連なって表示されます。実際のアニメーション自体は CSS の @keyframes で opacity と translateY を変化させており、空白は専用の幅を持つ要素に置き換えて単語間を保っています。
映える使いどころ
- ランディングページのファーストビューのキャッチコピー
- ブランドサイトのトップで世界観を印象づけたいとき
- セクションの見出しに動きを足して視線を集めたい場面
登場の速さは animation-delay の係数を、文字が浮き上がる距離は translateY の値を変えて調整できます。注意したいのは、元のテキストを span の集合に書き換える点で、装飾なら問題ありませんが、過度な動きは読みづらさにつながります。動きを抑えたい利用者のために、prefers-reduced-motion を見てアニメーションを無効化する分岐を足すとより親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
文字が出てくる速さを変えられますか
JavaScript で各文字の animation-delay を計算している係数を小さくすると速く、大きくするとゆっくり順番に現れます。1 文字あたりの間隔をここで調整します。
日本語の文章でも使えますか
文字列を 1 文字ずつ分割する方式なので日本語でも動きます。ただし長文では多くの要素が生成されるため、短い見出しやキャッチコピーで使うのが向いています。