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. Bootstrap Photo Gallery jQuery plugin
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  3. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  4. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  5. no-image
  6. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP