ブラーから鮮明化するテキスト
強くぼかした状態から徐々にピントが合い、文字がくっきり鮮明になっていくタイトル演出です。カメラのフォーカスが合う瞬間のような、写真的なドラマを生みます。仕組みは CSS の filter:blur() を初期値 20px から 0 へ @keyframes でアニメーションさせるだけ。
解説
強くぼかした状態から徐々にピントが合い、文字がくっきり鮮明になっていくタイトル演出です。カメラのフォーカスが合う瞬間のような、写真的なドラマを生みます。仕組みは CSS の filter:blur() を初期値 20px から 0 へ @keyframes でアニメーションさせるだけ。同時に opacity も 0 から 1 へ動かすことで、ふわっと浮かび上がる印象を強めています。JavaScript は不要です。
使いどころ
- ブランド名やキャッチコピーを印象的に登場させるヒーロー
- セクションの見出しが視界に入った瞬間に効かせる演出
- ストーリー性のある LP のオープニング
ぼけの強さは開始時の blur() の値、合焦の速さはアニメーション時間で調整できます。遅延（delay）を足すと「間（ま）」が生まれ、より演出的になります。実サイトではスクロール到達で発火させると効果的です。filter:blur は描画コストがやや高いため、長文や多数要素への同時適用は避け、見出し単位で使うのが無難です。動きを抑える設定では prefers-reduced-motion で即時表示にしましょう。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
ぼけの強さや速さを変えられますか？
初期のぼけ具合は filter: blur(20px) の数値で、合焦の速さはアニメーション時間（現在は 1.5s）で調整します。数値を大きくすると最初のぼけが強く、時間を長くするとゆっくりピントが合います。
古いブラウザでも表示されますか？
filter プロパティは主要な最新ブラウザで広く対応しています。万一未対応の環境でも、文字自体は表示されるため、内容が読めなくなることはありません。