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. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  2. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  3. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  4. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  5. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  6. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP