波打つ文字（順番にバウンス）
見出しの文字が1文字ずつ順番に上へ跳ねていく、波打つようなテキストアニメーションです。同じ動きでも少しずつタイミングをずらすことで、左から右へ波が伝わるように見え、ページに楽しい雰囲気を添えます。
解説
見出しの文字が1文字ずつ順番に上へ跳ねていく、波打つようなテキストアニメーションです。同じ動きでも少しずつタイミングをずらすことで、左から右へ波が伝わるように見え、ページに楽しい雰囲気を添えます。
各文字を span で囲み、CSS の @keyframes で translateY を使って上下にバウンスさせています。波のように見える秘密は animation-delay で、1文字ごとに0.1秒ずつ開始を遅らせている点です。nth-child で文字番号を指定して遅延を割り当てており、JavaScript は使っていません。
使う場面と注意
- トップページの挨拶やキャッチコピー
- キャンペーンや告知の見出し
- 子ども向け・カジュアルなサイトの装飾
跳ねる高さは wv-bn の translateY、波の速さは 1.6秒の長さや遅延量で調整できます。文字数を増やすときは span を足し、対応する nth-child の遅延も追加します。動き続ける装飾なので、本文や重要情報には使わず短い見出しに限定し、prefers-reduced-motion で停止できるようにしておくと読みやすさを損ないません。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
文字数を増やすにはどうしますか
HTML に span をひとつずつ追加し、その文字番号に対応する nth-child の animation-delay を CSS に書き足します。遅延を0.1秒ずつずらすと波の流れが揃います。
跳ねる高さや速さは調整できますか
できます。高さはキーフレーム wv-bn の translateY の値、速さは各 span に指定したアニメーションの再生時間で変えられます。小さめにすると上品な動きになります。