mgGlitch

JavaScript

グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショングリッチ効果を付ける非常に軽量なjQueryプラグインです。グリッチ効果とは、「グリッチ・アート」とも呼ばれ、デジタルまたはアナログで発生する意図されたエラーのことを言います。エラーと言っても本来のエラーの意味とは異なり、意図的に発生させた「みせかけのエラー」という意味です。つまり、本来のイメージが知られていれば、よりその効果をユーザーに感じてもらえます。

しかし、写真やテキストなど明らかに本来のものと異なることが分かるものについては、瞬時にその効果を感じてもらえるでしょう。それでは、mgGlitchについて、詳しく見ていきましょう。

mgGlitch

デモ

グリッチ効果は、具体的にはどんな場面で見ることができるでしょうか。

メジャーなもので、セキュリティを強化するために使用されていることが多いようです。アルファベットや数字が変形し認識しにくくなっている文字列を、自らテキストで入力し送信するという経験が一度はありませんか?

送信者がコンピューターによるものではなく、人為的に行われたものとして信頼性を持たせるために使用されています。mgGlitchのデモページでは、イメージにグリッチ効果を持たせていますが、この場合はアートの要素が強いです。ノイズが入ったように画像の一部がずれたりかすれたりします。見え方によっては少し怖い雰囲気が出ますし、デモページはまさしくそのような雰囲気があると思います。

mgGlitchの仕組みですが、指定した要素(htmlまたはimage)を3回クローンすることによってエラーを表示させます。また、静止した背景(ここでは元画像)が必要です。

  • 絶対位置でグリッチさせたい要素を選択
  • jqueryライブラリの読み込みを行う
  • プラグインのインスタンス化

上記の詳細については、デモページにhtml・css・jsがそれぞれ事細かに記載されています。ご覧になって思った方も多いと思いますが、実装はいたって簡単です。

mgGlitch

Yet Another Ripple Pluginクリック時に波紋のようなアニメーションエフェクトを実装できるjQueryプラグイン「Yet Another Ripple Plugin」前のページ

セクションビュー対応のナビゲーションメニュー実装「MenuSpy」次のページMenuSpy

関連記事

  1. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  2. Inspiration for Grid Loading Animations
  3. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  4. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  5. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP