タイプライターテキスト
このアニメーションは、文字が1つずつ打ち込まれては消えていくタイプライター演出です。JavaScript で文字列配列を1文字ずつ slice して表示し、打ち終えると一定時間止めてから今度は逆に削っていき、次のフレーズへ循環します。
解説
このアニメーションは、文字が1つずつ打ち込まれては消えていくタイプライター演出です。JavaScript で文字列配列を1文字ずつ slice して表示し、打ち終えると一定時間止めてから今度は逆に削っていき、次のフレーズへ循環します。打鍵の速さは setTimeout の待ち時間で制御し、入力80ミリ秒、削除40ミリ秒と差をつけて自然さを出しています。点滅するカーソルは CSS の @keyframes blink で表現しています。
使う場面
- トップページのキャッチコピーを複数見せ、印象を強めたいとき
- サービスの強みや対応分野を順番にアピールするヒーロー部分
- ローディング中に短いメッセージを切り替えて飽きさせないとき
表示するフレーズは words 配列を書き換えるだけで自由に差し替えられます。速度は2つの setTimeout の数値で、文字色は CSS の .typer__text で変更できます。注意点として、動き続ける演出は prefers-reduced-motion を尊重し、動きを抑えたい利用者には静止表示へ切り替える配慮があると望ましいです。重要な情報をこの演出だけで伝えると読み取りづらいため、補足のテキストも用意します。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
表示する言葉を変えるにはどこを編集しますか
JavaScript 冒頭の words 配列に並んでいる文字列を書き換えるだけです。要素を増やせばその数だけ順番に表示され、最後まで来ると先頭へ循環します。前置きの言葉は HTML の typer__prefix で変更できます。
打つ速さや消す速さは調整できますか
できます。入力中の待ち時間 80 と削除中の 40 という setTimeout の数値を変えれば速度が変わります。数値を小さくすると速く、大きくするとゆっくり動きます。打ち終わりの一時停止は別の数値で調整します。