マウスの動きに合わせて波紋の動きをリアルに表現できるプラグイン「jQuery Ripples」を紹介します。

実装したものはこちらで確認できます。

プラグインの入手と読み込み

以下のサイトからプラグインをダウンロード
https://github.com/sirxemic/jquery.ripples

ダウンロードが完了したらhead内、もしくはbodyタグ内の最下部に読み込ませます。
この時、jQuey本体の読み込みを先にしておくことを忘れないでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.ripples-min.js"></script>

波紋をつけたい範囲を指定

波紋をつけたい範囲をdivタグで囲みます確認のサイトではクラス名.bg-sliderで指定ています。

プラグインの設定

以下のようなオプションの設定が用意されていますので、適宜調整してお好みの表現をしてください。

$(document).ready(function() {
　$('.bg-slider').ripples({ //波紋をつけたい要素の指定
　　resolution: 400, //波紋の広がりの速度（値が大きいほど遅くなる）
　　dropRadius: 40, //波紋の大きさ（値が大きいほどでかくなる）
　　perturbance: 0.08, //波紋による屈折量（値が大きいほどブレる）
　　});
});

こちらのプラグインはPCには対応しているのですが、スマホでは対応していないので注意してください。

水の動きを表現するにはとても簡単に設定できるプラグインです。機会がありましたら、ぜひお試しください。