CINXE.COM
グリッチエフェクト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>グリッチエフェクト</title> <link rel="stylesheet" href="style.css"/> <style> .imageWrapper { position: relative; clip-path: inset(15px); /* ズレの部分を隠すため内側にクリッピング */ } /* 走査線 */ .imageWrapper::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(transparent, transparent 6px, #0006 6px, #0006 8px); filter: blur(2px); mix-blend-mode: overlay; } .image { display: block; filter: url(#filter); } </style> </head> <body> <div class="imageWrapper"> <!-- フィルターを適用したい画像 --> <img src="images/image-1.jpg" width="512" height="384" alt="" class="image"> </div> <div class="imageWrapper"> <img src="images/image-2.jpg" width="480" height="640" alt="" class="image"> </div> <div class="imageWrapper"> <img src="images/image-3.jpg" width="512" height="512" alt="" class="image"> </div> <!-- フィルター --> <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="filter"> <!-- 色チャンネルを分解 --> <!-- G チャンネル --> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="g"/> <!-- B チャンネル --> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="b"/> <!-- R チャンネルを少しずらす --> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/> <feOffset dx="8" dy="0"/> <!-- G/B を比較(明)モードで重ね、「rgb-layers」として登録しておく --> <feComposite in="g" in2="" operator="lighter"/> <feComposite in="b" in2="" operator="lighter" result="rgb-layers"/> <!-- ずらし1回目 --> <!-- 水平方向に伸びたフラクタルノイズを追加 --> <feTurbulence type="fractalNoise" baseFrequency="0 0.02" numOctaves="3"/> <!-- 輝度をアルファに（輝度が低い領域はより透明になり、輝度が高い領域はより不透明になる） --> <feColorMatrix type="luminanceToAlpha"/> <feComponentTransfer> <!-- 透明と黒で2値化 --> <feFuncA type="discrete" tableValues="0,1"/> </feComponentTransfer> <!-- 黒い部分だけ合体し、水平方向にずらす --> <feComposite in2="rgb-layers" operator="xor"/> <feOffset dx="8" dy="0"/> <!-- Rレイヤーだけずらしておいた画像と合体 --> <feComposite in2="rgb-layers" operator="over" result="wip1"/> <!-- ずらし2回目（値を変えて同じ工程を繰り返す） --> <feTurbulence type="fractalNoise" baseFrequency="0 0.01" numOctaves="4" seed="5"/> <feColorMatrix type="luminanceToAlpha"/> <feComponentTransfer> <feFuncA type="discrete" tableValues="0,1"/> </feComponentTransfer> <feComposite in2="rgb-layers" operator="xor"/> <feOffset dx="2" dy="0"/> <feComposite in2="wip1" operator="over" result="wip2"/> <!-- ずらし3回目 --> <feTurbulence type="fractalNoise" baseFrequency="0 0.01" numOctaves="3" seed="8"/> <feColorMatrix type="luminanceToAlpha"/> <feComponentTransfer> <feFuncA type="discrete" tableValues="0,1"/> </feComponentTransfer> <feComposite in2="rgb-layers" operator="xor"/> <feOffset dx="-15" dy="0"/> <feComposite in2="wip2" operator="over"/> </filter> </svg> <a href="../index.html">目次へ戻る</a> </body> </html>