波紋と聞いてビビッときた方、私とともだちになりましょう！
そう！仙台が誇る漫画、ジョジョですよね(。ﾟωﾟ)

今回は簡単に波紋を修得でき、、、いえ、、、
マウスに合わせて波紋をかけるjQueryプラグイン「jQuery Ripples」をご紹介します。
動きがキレイでいつまでもマウスを動かしていたくなりますよ。
 

jQuery Ripples
http://sirxemic.github.io/jquery.ripples/

下記に「jQuery Ripples」を使用する時の手順を説明します！

その前に注意点

Chromeではローカルで動きを確認することが出来ませんでした。また、IE10以前のバージョンに未対応、スマートフォンブラウザでも閲覧できないので注意してください。
 

「jQuery Ripples」プラグインの使用方法

ファイル読込

下記から「jquery.ripples」をダウンロードします。

「jquery.ripples」
https://github.com/sirxemic/jquery.ripples/

以下のようにダウンロードしたファイルを読み込みます。

JS

今回はbodyに指定します。

サンプル

「jquery.ripples」を使用したデモページを用意しました。
「jquery.ripples」プラグインを使用したデモページ

まとめ

以上、マウスに合わせて波紋をかけるjQueryプラグイン「jQuery Ripples」をご紹介しました。

いかがでしたか、波紋を修得出来ましたか？

動きもキレイで面白いですよね！背景ではなく、画像にちょっとした効果をかけたいときなんかにも使えるかもしれませんね(ﾟ∀ﾟ)