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. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

  2. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  3. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  4. Create a month picker jQuery plugin
  5. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  6. jQuery Glow

最近の記事

  1. チキン&グリーンサンドイッチ
  2. アートアクアリウム美術館 GINZA
  3. オケラ
  4. デンタルプロ 歯間ブラシ
  5. ダミアン・ハースト 桜
PAGE TOP