加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける

ARANK

はじめに以下のツイートが500いいねを超えましたので解説記事を書きます。 に完成品のデモとソースコードを置いてあります。ずっと観ていると気分が悪くなる恐れがあるのでご注意ください。グリッチとは元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つです。 ずらしとは色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装することでよりグリッチ感が出ると思います。実装コンテナ要素html<div class="glitch" style="background-image: url(...);"> </div> 要素のインラインスタイルでグリッチ効果をかけたい画像を background-image として指定します。後述、画像を RGB に分割するときに何度も画像 URL を記述しないで済むために background-image を使います。CSS で背景…