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

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  3. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  4. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  5. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP