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