タイプライター テキストアニメーション

解説

このスニペットは、文字が一つずつ打ち込まれては消えていく、いわゆるタイプライター風のテキストアニメーションです。JavaScript の tick 関数が、配列に並べた複数の語を順番に表示します。slice で 1 文字ずつ増やして打ち込み、語尾まで来たら少し待ってから今度は 1 文字ずつ削り、削り切ると次の語へ進みます。打つときと消すときで setTimeout の待ち時間を変えているため、入力は適度に速く、削除はテンポよく進みます。点滅するカーソルは CSS の @keyframes blink で表現され、step-end でかちっと切り替わる本物らしい点滅になっています。

活用シーン

• 「私たちは○○です」のように肩書きや強みを切り替えて見せるヒーロー
• サービスが対応できる職種や用途を順に提示するキャッチコピー
• ブランドのキーワードをリズミカルに巡回表示する見出し

表示する語は words 配列を書き換えるだけで変えられ、打鍵や削除の速さは setTimeout の数値で調整します。注意点として、文字を入れ替えるとカーソル横の幅が変わって周囲がガタつくことがあるため、min-width や固定幅の領域を用意すると安定します。点滅や入れ替わりが苦手な利用者には、prefers-reduced-motion を見て静的な 1 語だけを表示する配慮を入れると親切です。

使用例・適したシーン

• ヒーローのキャッチコピー
• 見出しの強調
• コーポレートのキービジュアル