画像エフェクト
画像エフェクトに分類されるWeb表現技法12件。clip-path ホバーリビール、デュオトーン (mix-blend-mode)、Ken Burns スライドショー、before/after 比較スライダー など。ライブデモとコピーできるコード付き。
clip-path ホバーリビール
clip-path の circle() をマウス位置から広げ、下の画像を円形に切り抜いて見せるホバー演出。商品やビフォーアフターの差分提示に使えます。
デュオトーン (mix-blend-mode)
モノクロ画像に2色のレイヤーを mix-blend-mode で重ね、雑誌風の2色グラフィックを生成。配色プリセットをワンクリックで切り替えられます。
Ken Burns スライドショー
静止画をゆっくりズーム&パンしながらクロスフェードさせる映画的スライドショー。ヒーローバナーや背景演出に最適です。
before/after 比較スライダー
透明な range と clip-path で2枚の画像を境界線で切り替えるビフォーアフター比較。加工前後やリフォーム事例の紹介に。
mix-blend-mode テキスト
difference ブレンドで背景色を反転して切り抜く大型タイポ。マウス追従の光スポットで色が躍動します。LP のキービジュアルに。
ホバーでカラー化ギャラリー
grayscale フィルターで全画像をモノクロ表示し、ホバー中の1枚だけをカラー&拡大。CSSのみで動くフォトギャラリーに使えます。
RGBずらしグリッチ
同一画像を3枚重ねてチャンネルごとに着色・ずらし、走査線を被せたグリッチ風ホバーエフェクト。サイバー/音楽系サイトのアクセントに。
スポットライト マスク
radial-gradient のマスクで暗転した画像をマウス位置だけ明るく照らすスポットライト演出。インタラクティブな探索体験を演出できます。
CRT・VHSレトロ画面
画像にスキャンライン・色収差（RGBずれ）・微振動・ノイズを重ね、ブラウン管/ビデオ風のレトロ画面に変換します。走査グローやVHS風OSD（REC表示）も入り、エモい・サイバーパンク系のヒーローや作品アーカイブの演出に最適。canvasノイズは取得失敗時もCSSグラデにフォールバックします。
ハーフトーン網点
画像を canvas で解析し、各セルの明度をドット径に変換した印刷風ハーフトーン網点を描画。斜めに進む波でドット径が脈打ち、マウス近傍では網点が膨らんで反応します。雑誌/レコードジャケット風のグラフィックや没入系ビジュアルに。CORS失敗時は放射状グラデの網点へフォールバック。
ホバー・ディストーション
画像にマウスを乗せると、その位置を中心に sin 波の歪み（ディストーション）が走る canvas エフェクト。ピクセル変位で水面や陽炎のような揺らぎを表現し、フォトギャラリーやヒーローに没入感を与えます。
RGBずれグリッチ
ホバー/マウス移動で R・G・B チャンネルが左右にずれるアナグリフ風グリッチ。mix-blend-mode:screen で重ねた3レイヤーをマウス速度に応じて分離し、サイバー/音楽系のアクセントに最適です。