ループタイプライターアニメ
このループタイプライターアニメは、文字が 1 字ずつ打ち込まれては消え、次の言葉へと入れ替わり続けるテキスト演出です。固定の文言（例：「私たちは」）の後ろに、複数の単語を順番にタイプ・削除して表示します。
解説
このループタイプライターアニメは、文字が 1 字ずつ打ち込まれては消え、次の言葉へと入れ替わり続けるテキスト演出です。固定の文言（例：「私たちは」）の後ろに、複数の単語を順番にタイプ・削除して表示します。JavaScript は setInterval で一定間隔ごとに文字を 1 文字ずつ足し引きし、単語を打ち終えたら削除に転じ、消し終えたら次の単語へ進みます。点滅するカーソルのバーは @keyframes blink による CSS アニメーションです。
使う場面
- トップページのヒーロー見出しで、複数のキャッチを順に見せたいとき
- サービスの強みを「デザイン・コード・ブランド」のように切り替えて訴求したいとき
- 静止テキストに動きを足し、視線を引きつけたいとき
表示する単語は配列を書き換えるだけで差し替えられます。打鍵の速さは setInterval の間隔（初期は 80 ミリ秒）で調整します。文字色やフォントサイズは CSS で変更可能です。動きが苦手な利用者に配慮し、prefers-reduced-motion のときはアニメを止めて代表的な 1 語を静的に表示する分岐を足すと、より配慮の行き届いた実装になります。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
表示する言葉を入れ替えられますか？
はい。JavaScript の冒頭にある単語の配列を書き換えるだけで、好きな言葉を好きな数だけ順番に表示できます。言葉の数や文字数に制限はなく、配列の順序どおりに繰り返されます。
打つ速さは調整できますか？
できます。文字を 1 字ずつ進める間隔（初期は 80 ミリ秒）の数値を小さくすれば速く、大きくすればゆっくりタイプされます。削除の速さも同じ間隔で動きます。