Image Glitch Effect - ホラー映画風のグリッチ効果を演出
ホラー映画などで、映像に突然ノイズが入って乱れるという効果がありますが見たことはあるでしょうか。映像の不安定さによって感情も不安になり、何か起こるのではないかと心配になってしまいます。 そんなグリッチ効果をスタイルシートだけで実現できるのがImage Glitch Effectです。
Image Glitch Effectの使い方
デモです。見ていると突然画像にノイズが入ります。
こちらも別なデモ。突然の色反転が怖いです。
画像だけで十分怖いです。
反転したり、別な部分の画像が出たり…。
水平方向だけでなく垂直にも変化を起こせます。
この画像のずれがまた怖い…。
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.