入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。SPEED は1文字あたりのタイピング速度です。
.typewriter-wrap {
display: flex;
align-items: center;
}
.typewriter {
font-family: 'Oswald', sans-serif;
font-size: 4rem;
font-weight: 600;
letter-spacing: 0.05em;
color: #1A1A1A;
white-space: pre-wrap;
}
.caret {
display: inline-block;
width: 3px;
height: 1em;
background: #E91B89;
margin-left: 4px;
vertical-align: middle;
animation: caret-blink 0.7s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
テキストが1文字ずつタイプされていくように現れる。文字が時間軸を獲得し、読み手の視線を強制的にリードする。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。