タイピング風キャレット
タイピング風キャレットは、文字の末尾でカーソルが点滅し、文章を打ち込んでいるような臨場感を出す小さな演出です。この実装は CSS アニメーションだけで作られており、JavaScript は不要です。
解説
タイピング風キャレットは、文字の末尾でカーソルが点滅し、文章を打ち込んでいるような臨場感を出す小さな演出です。この実装は CSS アニメーションだけで作られており、JavaScript は不要です。点滅の正体は幅 2px の細い span で、@keyframes の中で 50% 地点だけ opacity:0 にし、step-end のタイミング関数を使ってフェードせずカチッと消灯・点灯を繰り返します。これで本物の端末カーソルらしい瞬きになります。
向いている場面
- ヒーロー見出しに動きを足して目を引きたいとき
- ターミナル風・開発者向けサイトの世界観づくり
- キャッチコピーを一文字ずつ表示する演出の仕上げ
キャレットの色は background、高さは height の値で文字サイズに合わせられます。点滅の速さは animation の秒数を変えるだけです。文字自体を順番に打ち込む効果まで付けたい場合は、別途 JavaScript で一文字ずつ追加します。常時動き続けるため、画面に多用すると気が散る点には配慮しましょう。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
文字を一文字ずつ打ち込む動きも入っていますか
いいえ。これはカーソルの点滅だけです。文章を順番に表示したい場合は、JavaScriptで一文字ずつ追加する処理を別に組み合わせます。
カーソルの色や太さは変えられますか
はい。span の background で色、width で太さ、height で高さを調整できます。文字サイズに合わせて height をそろえると自然に見えます。