Webサイトのセクションタイトル（Contentsなど）に使える、ノイズが走るような「グリッチ表現」のCSSアニメーションをまとめました。
今回は、派手すぎずサイトに馴染みやすい、モノクロで統一したクールなデザインを5パターン紹介します。
HTMLとCSSをコピペするだけで実装可能です。環境はWordPress（SWELL）を想定していますが、通常のHTMLサイトでも使用できます。
目次
The Analog Glitch（アナログ・グリッチ）
See the Pen Untitled by BaseKENT (@basekent) on CodePen.
調整方法
- ノイズの激しさ:
@keyframes内のclip-path: inset(...)の数値を変えるか、animationの秒数（2sなど）を短くすると高速になります。 - 色の濃さ:
.glitch-pattern-1::before内のtext-shadowの色（#555など）を変更してください。
Ghost Decode（ゴースト・デコード）
See the Pen Untitled by BaseKENT (@basekent) on CodePen.
調整方法
- ノイズの頻度:
animation: blur-noise 4sの4sを長くすると、ノイズが走る間隔が広がります。 - ブレ具合:
@keyframes内のfilter: blur(4px)などのピクセル数を増やすと、より強くボヤけます。
Scanline Slice（スキャンライン・スライス）
See the Pen Untitled by BaseKENT (@basekent) on CodePen.
調整方法
- 線の太さ:
@keyframes内のpolygonのY座標の差（例：40%と42%の差2%）を広げると太いバーになります。 - 速度:
animationの3sを変更して速度調整します。
Digital Stutter（デジタル・スタッター）
See the Pen Untitled by BaseKENT (@basekent) on CodePen.
調整方法
- カクカク感:
steps(1)はアニメーションを補間せずパチパチ切り替えます。滑らかにしたい場合はstepsを削除してlinearにしてください。 - 点滅頻度:
0%から90%までは何もしない設定なので、ここの幅を狭めると頻繁に壊れます。
Vertical Stretch（バーティカル・ストレッチ）
See the Pen Untitled by BaseKENT (@basekent) on CodePen.
調整方法
- 伸び率:
scaleY(3)などの数値を上げると、より極端に縦に伸びます。 - 歪み:
skewXの角度を変えると、斜めへの歪みが加わります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
