透過テキストのワイプ・エフェクト

Text / Typography

実装ポイント Focus: 「雰囲気」から「メッセージ」への段階的な変化を行うことで視線誘導する実装です。
初期状態では blur(15px) で画像を抽象化し、3秒かけて徐々に鮮明にすることで、ユーザーの期待感を高める演出を導入しました。
テキストは background-clip: text と透過グラデーションを使用。背景に溶け込んだ状態から左から右へ光が走るように文字色が確定し、最後に drop-shadow でフワリと浮き上がる動きをつけました。
挑戦 Challenge: グラデーションの角度（deg）と background-position の移動方向が直感と逆になる現象に対し、数値を -90deg / 100%→0% へと意図的に反転させることで、正確なワイプ方向を制御しました。
また一般的な text-shadow は透過文字の「内側」にも影が描画され、色が濁って見えてしまいます。
そのため今回は filter: drop-shadow を採用することで、文字のシルエットの外側だけに影を落とし、透明感のあるクリアな発光表現を採用しています。
使用技術 Animation: ・HTML5 / SCSS
・CSS Animation (Keyframes)
・CSS Background (Clip: text, Linear-gradient)
・CSS Filter (Drop-shadow, Backdrop-filter)
詳細 Details: #background-clip #css-filter