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

2014.01.17

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

[ads_center]

pixelate.jsの使い方

pixelate.js

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

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

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

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

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

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