pixelate.js

JavaScript

画像にモザイクをかけてマウスオーバーで解除できるjQueryプラグイン「pixelate.js」

pixelate.jsというjQueryプラグインを使えば、画像にモザイクをかけることができます。モザイクがかかった画像にマウスオーバーすると解除され、画像からカーソルを離すと再度モザイクがかかります。「閲覧注意」的な記事を作りたい時に役立ちますね。

[ads_center]

pixelate.jsの使い方

pixelate.js

pixelate.js

使い方はとても簡単です。jQuery本体とダウンロードしたプラグインファイルをhead内に読み込み、画像のimgタグ内にdata-pixelateを追加してあげるだけです。

<img src="img1.jpg" data-pixelate>

実際の公式サイトにある使い方には以下のコードも記述されているのですが、実際に試したところ特に記述しなくてもモザイクがかかりました。

$('img').pixelate();
document.querySelector('img').pixelate();

オプションとか指定しなければ書かなくてもいいのな?ちょっと詳しいことはよくわかりませんが、とりあえずこんな感じで簡単に実装できます。

画像にモザイクをかけた記事を作りたいなんて時にいかがでしょうか。

関連記事

  1. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  2. socialShare.js
  3. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  4. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  5. Animsition
  6. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP