タスクの道筋 / 入力から結果へ
CSS テキストグリッチ効果を作る方法
- 01
プレビューテキストを入力する
「プレビューテキスト」に 1〜32 文字を入力します。ラベル横のカウンターが文字数を追跡します。レイヤーが分裂し始めると、短くて幅のある単語が最も読みやすくなります。
- 02
3 色を設定する
「テキストカラー」がベースレイヤーを描き、「シアンチャンネル」と「レッドチャンネル」が色収差のフリンジを作るオフセットレプリカになります。純粋なシアンと赤に近いチャンネルはクラシックな色収差の見た目に、くすんだチャンネルはより繊細でモダンな分裂になります。
- 03
グリッチの動きを調整する
「レイヤーオフセット」（1〜12 px）がレプリカのずれ量、「サイクル時間」（0.2〜3 秒）がループの速さです。プレビューは 3 つのレイヤーをすべてライブで演じます。
- 04
3 つのレイヤーを理解する
ベース要素は「テキストカラー」を保ち、シアンのレプリカは行の上半分に、レッドのレプリカは下半分にクリップされます。各レプリカは steps(2, end) のアニメーションで動きます。滑らかなスライドではなく硬いジャンプで、それがグリッチを信号干渉のように感じさせます。
- 05
グリッチ CSS をコピーする
「CSS をコピー」または「.css をダウンロード」で toolars-text-glitch.css を保存します。書き出しには prefers-reduced-motion のブロックが含まれ、動きに敏感な訪問者には静的なフリンジが残ります。出力パネルにはライブのバイト数が表示され、テキストが検証を通らない間は両方のアクションが無効のままです。
- 06
data-text 属性を追加する
レプリカは attr(data-text) から内容を読むため、要素には表示テキストと同一の data-text 属性が必要です。あとで文言を変えるときは両方を更新してください。シアンとレッドのレイヤーが実際に描くのはこの属性です。属性はクラスと同じ要素に載るため、効果全体が 1 つのタグに収まります。