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

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  2. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  4. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  5. Select.js

    JavaScript

    セレクトボックスをオシャレにスタイリングしてくれるJS・CSSライブラリ「Select.js」

    Select.jsはセレクトボックスをシンプルでオシャレにスタイリング…

  6. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP