タイプライターアニメーション
文字が1字ずつ打ち込まれ、消えて次の語に入れ替わる タイプライターアニメーション です。JavaScript で文章を1文字ずつ slice して表示を伸ばし、打ち終えると少し待ってから今度は1文字ずつ削って消し、配列の次のフレーズへ進みます。
解説
文字が1字ずつ打ち込まれ、消えて次の語に入れ替わるタイプライターアニメーションです。JavaScript で文章を1文字ずつ slice して表示を伸ばし、打ち終えると少し待ってから今度は1文字ずつ削って消し、配列の次のフレーズへ進みます。打鍵と削除で速度を変え（このサンプルは打つ80ミリ秒・消す40ミリ秒）、人が入力しているようなリズムを作っています。点滅するカーソルは @keyframes の CSS で表現しています。
活躍する場面
- トップページで複数のキャッチコピーを順番に見せる
- 「○○ができます」と提供価値を切り替えて訴求する
- ヒーロー部分に動きを足して注目を集める
表示する文言は phrases 配列を書き換えるだけで差し替えられ、いくつでも追加できます。テンポは打鍵・削除・待機の各ミリ秒で細かく調整可能です。注意点として、文字が出そろうまで内容を読み切れないため、本当に重要な情報は静的にも併記すると安全です。動きを抑えたいユーザー向けに、prefers-reduced-motion で全文を即時表示する分岐を足すと配慮が行き届きます。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
表示する言葉を変えたり増やしたりできますか
はい。JavaScript の phrases 配列の文字列を書き換えるだけです。要素を足せばいくつでもフレーズを巡回させられ、HTML は触る必要がありません。
打つ速さや消す速さは調整できますか
できます。1文字ごとの待ち時間をミリ秒で指定しているので、その数値を変えれば打鍵や削除のテンポ、フレーズ間の待機時間を自由に調整できます。