Glitch effect（グリッチエフェクト）サンプル集

Glitch effect（グリッチエフェクト）とは？

バグによって起こるノイズのこと。例えばテレビやPCのモニターで映像を見ている時ゲームをしている時に時々おこる画面のエラーです。使い方次第ではWebデザイン・Webコンテンツにも応用が聞くエフェクトです。そこで今回は比較的導入しやすそうなサンプルを探してきました。皆様のお仕事、勉強にお役立てください！

※codepenのサンプルは、気になったのあったら、右上のロゴクリックするとcodepensサイトで閲覧できます。

See the Pen
Glitch effect strobocops by Jorinde (@jorinde)
on CodePen.

CSSのみでグリッチエフェクトが実装されています。上記サンプルをオンマウスでも発動できるようにするとhoverエフェクトでも使用できます。

See the Pen
A Glitch effect by Marlon Tugwete (@marlon-tugwete)
on CodePen.

canvas（2d）を使用して、Javascriptで実装されています。jQuery、Tweenmax等のライブラリは使用されていないので、理解しやすく参考になります。

See the Pen
SVG Glitch by Dirk Weber (@DirkWeber)
on CodePen.

SVG画像に対してのグリッチエフェクト。

jQueryと一緒に使用する、グリッチエフェクトのプラグイン「mgglitch-js」。簡単に導入できて、派手なアニメーションを実装できます。
http://mgglitch-js.webflow.io

See the Pen
glitch glitch glitch by Hadrien Mongouachon (@hmongouachon)
on CodePen.

グリッチエフェクトのプラグイン「mgglitch-js」を使用したサンプルです。かっこいいですね。