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. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  2. no-image

    JavaScript

    カスタマイズもできるダイナミックなコンタクトフォーム「Swyft Callback」

    Swyft Callbackはカスタマイズもできるダイナミックで美しい…

  3. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  4. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  5. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  6. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP