グラデマスクで描かれるテキスト
見出しの文字が、左から右へグラデーションで塗られていくように現れる描画演出です。仕組みは color:transparent で文字本体を透明にし、 background-clip:text で背景のグラデーションを文字の形に切り抜いて見せています。
解説
見出しの文字が、左から右へグラデーションで塗られていくように現れる描画演出です。仕組みは color:transparent で文字本体を透明にし、background-clip:text で背景のグラデーションを文字の形に切り抜いて見せています。背景を 200% 幅に広げて初期位置を 100% 0 に置き、@keyframes tgmFill で background-position を 0 0 までスライドさせることで、塗りが満ちていくアニメになります。JS 不要で forwards により塗り終わった状態で停止します。
使う場面
- ヒーローのキャッチコピーを印象的に登場させたいとき
- ローディング完了後に見せるメインメッセージ
- ブランド名やスローガンの 1 行見せ
色は linear-gradient(90deg,#f093fb,#f5576c,#fbb034) の 3 色を差し替えれば雰囲気が変わり、font-size:clamp(48px,12vw,120px) で画面幅に応じて自動縮小します。スピードは 2.4s と開始の .3s ディレイで調整。background-clip:text は -webkit- 接頭辞も併記しており主要ブラウザで動きますが、未対応環境では文字が透明のままになり得るので color のフォールバックを添えると安全です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
文字が消えて見える環境はありますか?
background-clip:text に未対応の古い環境では文字色が透明のまま見えなくなる可能性があります。念のためフォールバックの文字色を指定しておくと安全です。
アニメは繰り返しますか?
繰り返しません。forwards 指定により一度塗り終えたら満ちた状態で停止します。ループさせたい場合は infinite を加え、開始位置に戻る指定を足してください。