【CodePen】グリッチエフェクトのアイデア15選

💡 実装のポイント
CSS変数の--top・--left・--v-heightを::before/::after側で再計算し、clip-pathで表示範囲を切り替える構成。glitch-a・glitch-bという2つの@keyframesがそれぞれ独立して適用されているため、ズレ方や周期を変えたい場合はこの2つの数値だけ調整すればよい。JSは使っておらず、CSS変数と擬似要素だけで完結している。

💡 実装のポイント
SCSSの@forループでrandom()関数を使い、noise-1・noise-2という2つの@keyframesを30ステップ分自動生成し、clip-path: inset()でランダムなノイズを表現している。文字のズレ色は.glitch::beforeがマゼンタ、::afterがライトグリーン。走査線は.scanlinesのrepeating-linear-gradientとmix-blend-mode: differenceで重ねている。SCSSがコンパイル前提のコードなので、そのままでは動かない点に注意。

💡 実装のポイント
@mixin glitchCopyで::before/::afterの共通スタイルをまとめ、SCSSの@forループ（20ステップ）でclipとskewをランダム生成する構成。色はマゼンタ（#ff00c1）のみとシンプルで、テキスト全体にもglitch-skewというキーフレームでランダムな傾きを加えているのが特徴。

💡 実装のポイント
jQueryで.text内のspanを4つ複製し、ズレ表示用のレイヤーを増やす仕組み。span:nth-child(1)〜(5)ごとに色（red/green/blue/white）とぼかし量を変えており、jerkwhole・jerkblueなど複数の@keyframesを組み合わせて不規則な揺れを演出している。層の数を変えたい場合はJS側のfor文のループ回数を調整すればよい。

💡 実装のポイント
SCSS変数$offset（6px）で色ズレの幅を一括管理している構成。#textの:before（グリーン）と:after（ブルー）をmix-blend-mode: screenで重ね、skew・moveという2つの@keyframesで動かしている。走査線はJSでwindow.innerHeightから本数を計算して.line要素を動的生成しており、リサイズ時にも再描画される。

💡 実装のポイント
html要素全体にtext-shadowを2色（マゼンタ/グリーン）重ねてズラし、textflickerという@keyframesをanimation-duration: 0.01sという極端に短い時間でinfinite再生することでチラつきを表現するシンプルな構成。JSは不使用で、ドット風フォントを@font-faceで埋め込んでいる。フォントを変えるだけでも印象が大きく変わる。

💡 実装のポイント
色や位置のズレではなく、SCSSの@forループ（50ステップ）でfont-weight・font-style・text-decoration・text-transformをランダムに切り替える、タイポグラフィが暴れるタイプのグリッチ表現。SCSSのリスト（nth()関数）とrandom()を組み合わせて生成している。画像・色を使わずテキストだけで成立するのが特徴。

💡 実装のポイント
three.jsのRawShaderMaterialでフラグメントシェーダーを自作し、GLSL側でRGBチャンネルのズレ・ブロックノイズ・走査線ノイズ・ホワイトノイズを合成する本格的な構成。CSSやJSのDOM操作ではなくWebGL/GLSLの知識が必要で、他のPenよりカスタマイズの難易度は高め。bgImg.init()の画像URLを差し替えれば別の画像にも適用できる。

💡 実装のポイント
SCSSの@function rand()でランダムな値を生成し、@mixin glitch内の@forループでclip-path: polygon()によるスライスをランダムな位置・タイミングで切り替える構成。animation-timing-functionにsteps(1, jump-end)を指定することで、なめらかな動きではなくコマ送りのようなカクつきを再現しているのがポイント。

💡 実装のポイント
data-img属性に指定した画像URLをjQueryで読み取り、addRuleプラグインで:before疑似要素のCSSルールを動的生成する仕組み。glitch1・glitch2の2つの@keyframesでbackground-positionとhue-rotate()を組み合わせ、ズレと色相の変化を演出している。複数枚並べたい場合は.glitch要素をdata-img違いで複製するだけでよい。

💡 実装のポイント
canvasに描画した画像のピクセルデータを直接操作し、RGBの各チャンネルをsin/cosの波形でずらして再配置するJavaScript実装。TweenMax（GSAP）でwaveAmp・waveFrq・posといった変数を時間経過でアニメーションさせ、その値をgetChannel()関数に渡してピクセル単位でズレを計算している。CSSでは再現しづらい、より本格的なグリッチアートに近い手法。

💡 実装のポイント
作者自作のjQueryプラグイン「mgGlitch」を読み込んで.glitch-imgにオプション付きで適用するだけの構成。blendModeTypeやglitch1TimeMin/glitch1TimeMax、glitch2TimeMin/glitch2TimeMaxといったオプション値だけで揺れの間隔や強さを調整できるため、CSS/JSを書かずにカスタマイズできるのが最大の特徴。

💡 実装のポイント
Pug（テンプレートエンジン）のfor文でラベルテキストを5つの.mask要素に複製し、それぞれを重ねてホバー時にズレて見せるレイヤー構造になっている。層の数を増減したい場合はfor i in [1, 2, 3, 4, 5]の配列の要素数を変えるだけでよく、マークアップ側の仕組みがシンプルなのが扱いやすいポイント。

💡 実装のポイント
button::afterに5つのclip-path用CSS変数（--slice-1〜--slice-5）を用意しておき、hover時のglitchキーフレームでそれらを順番に切り替えながらtransform: translateで位置をずらす構成。animation-timing-functionにsteps(2, end)を使うことで、なめらかな動きではなくカクカクした「グリッチ感」を出している。色は赤（#FF013C）とシアン（#00E6F6）の2色のみでCyberpunk風の配色を再現。

💡 実装のポイント
リンクのテキストを3つの要素に分け、それぞれの:before（赤）と:after（青）にclip: rect()とtext-shadowを設定し、hover時のみglitch-1・glitch-2の@keyframesを発火させる仕組み。さらにリンクの::before/::afterで背景画像をmix-blend-mode: hard-lightで重ね、hue-rotate()を使ったキーフレームで色もずらしている。テキストと画像、2種類のグリッチを組み合わせた凝った構成。