ホラー映画などで、映像に突然ノイズが入って乱れるという効果がありますが見たことはあるでしょうか。映像の不安定さによって感情も不安になり、何か起こるのではないかと心配になってしまいます。 そんなグリッチ効果をスタイルシートだけで実現できるのがImage Glitch Effectです。

Image Glitch Effectの使い方

デモです。見ていると突然画像にノイズが入ります。

デモ1

こちらも別なデモ。突然の色反転が怖いです。

デモ2

画像だけで十分怖いです。

デモ3

反転したり、別な部分の画像が出たり…。

デモ4

水平方向だけでなく垂直にも変化を起こせます。

デモ5

この画像のずれがまた怖い…。

デモ6

Image Glitch Effectが使えるポイントはそうそう多くないかも知れませんが、人を恐怖に陥れたいというのはホラー映画に限らずあるでしょう。ホラー小説の見出し画像で使ったり、文化祭の出し物を紹介するページで使ったりすることもできそうです。

Image Glitch EffectはCSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Image Glitch Effect | Demo 1 | Codrops codrops/CSSGlitchEffect: An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.