グリッチ風タイトル（H1）
これは見出しの文字が赤紫とシアンに分裂し、デジタルノイズが走るグリッチ表現の H1 です。同じ文字を data-text 属性で ::before と ::after に複製し、それぞれ別の色とずれた位置でアニメーションさせることで「RGB がずれた」映像のような見え方を作っています。
解説
これは見出しの文字が赤紫とシアンに分裂し、デジタルノイズが走るグリッチ表現の H1 です。同じ文字をdata-text属性で::beforeと::afterに複製し、それぞれ別の色とずれた位置でアニメーションさせることで「RGB がずれた」映像のような見え方を作っています。CSS のみで JavaScript は使いません。
仕組みの肝はclip-pathです。疑似要素を上下に切り分け、@keyframesで数フレームだけ横にカクッと動かすため、滑らかすぎず機械的なちらつきが生まれます。
使う場面と調整
- テック系・ゲーム・サブカルのキービジュアルやヒーロー見出し
- 分裂の色は
::beforeと::afterのcolorで変更 - 揺れ幅は
translateの数値、速さはanimationの秒数で調整
注意点として、常時ちらつくため長時間見る本文には不向きです。点滅が強いと不快に感じる人がいるので、@media (prefers-reduced-motion: reduce)でアニメーションを止める代替を用意すると安心です。表示文字は実体の H1 にあるため、見た目を派手にしても読み上げや SEO 上のテキストは保たれます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
分裂する色を別の配色に変えられますか
変えられます。glitch-title の ::before と ::after それぞれの color が分裂した文字の色です。標準では赤紫とシアンですが、ブランドに合わせて 2 色を差し替えれば雰囲気が大きく変わります。背景が暗い方がにじみが映えます。
動きが激しすぎる場合はどうすればよいですか
@keyframes 内の translate の値を小さくすると揺れ幅が抑えられ、animation の秒数を長くすると発生頻度が下がって落ち着きます。光の点滅が苦手な利用者向けに prefers-reduced-motion でアニメーションを止める指定を加えるのが望ましいです。