ノイズで揺れる文字（グリッチ）CSSジェネレーター
デジタルデータの破損や通信ノイズを模したテキストエフェクトを、CSSアニメーションのみで生成します。
プレビュー
<span class="glitch" data-text="{{text}}">{{text}}</span>.glitch {
display: inline-block;
position: relative;
color: {{main_color}};
font-size: {{font_size}}px;
font-weight: bold;
text-transform: uppercase;
position: relative;
text-shadow: 0.05em 0 0 {{glitch_color1}}, -0.05em -0.025em 0 {{glitch_color2}},
-0.025em 0.05em 0 #ff0;
animation: glitch-skew {{speed}}s infinite linear alternate-reverse;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 背景透過を維持しつつ、ノイズ効果を出すために mix-blend-mode を使用 */
mix-blend-mode: multiply;
}
.glitch::before {
animation: glitch-anim-1 {{speed}}s infinite linear alternate-reverse;
text-shadow: -2px 0 {{glitch_color1}};
clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
}
.glitch::after {
animation: glitch-anim-2 {{speed}}s infinite linear alternate-reverse;
text-shadow: -2px 0 {{glitch_color2}};
clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%);
}
@keyframes glitch-anim-1 {
0% { clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
20% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
40% { clip-path: polygon(0 47%, 100% 47%, 100% 48%, 0 48%); }
60% { clip-path: polygon(0 12%, 100% 12%, 100% 12%, 0 12%); }
80% { clip-path: polygon(0 82%, 100% 82%, 100% 82%, 0 82%); }
100% { clip-path: polygon(0 56%, 100% 56%, 100% 57%, 0 57%); }
}
@keyframes glitch-anim-2 {
0% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
20% { clip-path: polygon(0 65%, 100% 65%, 100% 66%, 0 66%); }
40% { clip-path: polygon(0 43%, 100% 43%, 100% 43%, 0 43%); }
60% { clip-path: polygon(0 25%, 100% 25%, 100% 26%, 0 26%); }
80% { clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); }
100% { clip-path: polygon(0 85%, 100% 85%, 100% 86%, 0 86%); }
}
@keyframes glitch-skew {
0% { transform: skew(0deg); }
10% { transform: skew(-1deg); }
20% { transform: skew(2deg); }
30% { transform: skew(0deg); }
40% { transform: skew(1deg); }
50% { transform: skew(-2deg); }
60% { transform: skew(0deg); }
100% { transform: skew(0deg); }
}機能、使い方
- ノイズエフェクト: デジタルデータの表示エラーや通信ノイズを模したテキストエフェクトを生成します。
- 歪みとズレの同時表現: 疑似要素による断線描写に加え、`skew` による全体の歪み、多重 `text-shadow` による色収差（色のズレ）を同時に適用しています。
- CSSのみで動作: JavaScriptを用いず、ブラウザの標準的なCSS機能（clip-path, transform）のみで実装されています。
CSSプロパティの説明
clip-path: polygon(...)
要素の特定の範囲だけを切り取って表示します。アニメーションでこのパスを高速に入れ替えることで、数ピクセル単位の「ノイズの断片」が走るような高度なグリッチを表現しています。
text-shadow（多重指定）
複数の異なる色の影をずらして重ねることで、RGBのずれ（色収差）に近い質感を出し、厚みを感じるノイズに仕上げています。
mix-blend-mode
重なり合うノイズの色をブレンドし、背景色がなくてもテキスト単体で深みのある色変化を生み出します。
