スプリット文字スライドインタイトル
これは見出しの文字を 1 文字ずつ span に分け、下から滑り込ませて表示する映画タイトル風のアニメーションです。各 span を opacity:0 と translateY(40px) で隠しておき、 nth-child ごとに animation-delay を 0.08 秒ずつずらすことで、左から順に立ち…
解説
これは見出しの文字を 1 文字ずつspanに分け、下から滑り込ませて表示する映画タイトル風のアニメーションです。各spanをopacity:0とtranslateY(40px)で隠しておき、nth-childごとにanimation-delayを 0.08 秒ずつずらすことで、左から順に立ち上がる連鎖が生まれます。CSS のみで動き、JavaScript は不要です。
イージングにcubic-bezierを使っているため、最後にふわっと減速して止まり、手作業の演出のような上質さが出ます。
使う場面と差し替え
- ヒーローのキャッチコピー、記事冒頭の大見出し
- 日本語・英語どちらでも 1 文字ずつ span に入れれば使える
- 遅延の刻みと
animationの長さで、登場の速さと余韻を調整
注意点として、文字数を増やすときはnth-childの指定を文字数ぶん追加する必要があります。読み上げでは分割した文字が 1 字ずつ読まれることがあるため、aria-labelに元の文章を補うと親切です。動きを控えたい利用者にはprefers-reduced-motionで最初から表示する代替を用意してください。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
文字数を増やしたいときはどうしますか
HTML で 1 文字ずつ span に分け、その文字数ぶん nth-child の animation-delay を追加してください。標準は 0.08 秒刻みなので、増やしすぎると全部出そろうまで時間がかかります。文字が多い場合は刻みを小さくすると間延びを防げます。
登場の速さや余韻を変えられますか
変えられます。animation の 0.8s を縮めると 1 文字ずつの動きが速くなり、animation-delay の刻みを変えると連鎖の間隔が変わります。最後のふわっとした止まり方は cubic-bezier のカーブで決まるので、値を調整すれば余韻の質感も変えられます。