mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショングリッチ効果を付ける非常に軽量なjQueryプラグインです。グリッチ効果とは、「グリッチ・アート」とも呼ばれ、デジタルまたはアナログで発生する意図されたエラーのことを言います。エラーと言っても本来のエラーの意味とは異なり、意図的に発生させた「みせかけのエラー」という意味です。つまり、本来のイメージが知られていれば、よりその効果をユーザーに感じてもらえます。
しかし、写真やテキストなど明らかに本来のものと異なることが分かるものについては、瞬時にその効果を感じてもらえるでしょう。それでは、mgGlitchについて、詳しく見ていきましょう。
mgGlitch
mgGlitchの実際のデモは以下から確認できます。
グリッチ効果は、具体的にはどんな場面で見ることができるでしょうか。
メジャーなもので、セキュリティを強化するために使用されていることが多いようです。アルファベットや数字が変形し認識しにくくなっている文字列を、自らテキストで入力し送信するという経験が一度はありませんか？
送信者がコンピューターによるものではなく、人為的に行われたものとして信頼性を持たせるために使用されています。mgGlitchのデモページでは、イメージにグリッチ効果を持たせていますが、この場合はアートの要素が強いです。ノイズが入ったように画像の一部がずれたりかすれたりします。見え方によっては少し怖い雰囲気が出ますし、デモページはまさしくそのような雰囲気があると思います。
mgGlitchの仕組みですが、指定した要素（htmlまたはimage）を3回クローンすることによってエラーを表示させます。また、静止した背景（ここでは元画像）が必要です。
マークアップは以下のルールの元に行います。
- 絶対位置でグリッチさせたい要素を選択
- jqueryライブラリの読み込みを行う
- プラグインのインスタンス化
上記の詳細については、デモページにhtml・css・jsがそれぞれ事細かに記載されています。ご覧になって思った方も多いと思いますが、実装はいたって簡単です。
グリッチ効果を持たせることができるjQueryプラグイン「mgGlitch」をぜひチェックしてみてください。ダウンロードや詳しい使い方は以下からどうぞ。
