グリッチテキスト
見出しの文字が赤と水色に分裂して小刻みに震える、サイバーパンク調のグリッチ表現です。実装はCSSのみで、 ::before と ::after の擬似要素に data-t 属性の同じ文字を複製し、それぞれを別の色でずらして重ねています。
解説
見出しの文字が赤と水色に分裂して小刻みに震える、サイバーパンク調のグリッチ表現です。実装はCSSのみで、::before と ::after の擬似要素に data-t 属性の同じ文字を複製し、それぞれを別の色でずらして重ねています。clip-path で表示範囲を上下に切り分け、steps() を使った @keyframes でカクカクと位置を飛ばすことで、信号が乱れたような不規則さを演出しています。
向いている使いどころ
- ゲーム・音楽・テック系イベントのヒーロー見出し
- 近未来やハッカー風の世界観を出したいLPのタイトル
- 404ページなど、あえて壊れた雰囲気を出したい箇所
色を変えたいときは ::before と ::after の color を差し替えるだけで雰囲気が大きく変わります。震えの強さは translate の数値、速さは animation の秒数で調整できます。常時アニメーションが動くため、長文ではなく短いタイトルに限定するのが読みやすさのコツです。揺れに弱い利用者に配慮し、prefers-reduced-motion でアニメーションを止める指定を添えておくと安心です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
分裂する色を変えられますか？
変えられます。擬似要素 before と after にそれぞれ設定された color を好きな2色に差し替えれば、ブランドカラーに合わせたグリッチにできます。
data-t 属性は何のためにありますか？
擬似要素で表示する複製テキストの中身を指定するためのものです。表示する文字を変えるときは、見出しのテキストと data-t の両方を同じ言葉にそろえる必要があります。