マウスの動きに合わせて波紋を描くjQueryプラグイン［jQuery Ripples］の使い方を紹介します。

まずは実際にウェブページに組み込んだサンプルを用意しましたのでご覧ください。

ONZE DEMO : https://on-ze.com/demo/jquery-ripples/

マウスの動きだけでなく、クリックにも反応してキレイな波紋が描かれますね。

使い方ですが、jQueryの本体ファイルとともにプラグインを読み込んで、［jQuery Ripples］を効かせる要素を指定するだけなので、比較的簡単に実装できます。

［jQuery Ripples］の実装方法

プラグインの入手とサーバーへのアップロード

最初に、配布されているプラグインのファイルを入手します。
下記サイトからダウンロードできるようになっています。

GitHub : https://github.com/sirxemic/jquery.ripples/

ダウンロードしたJavaScriptファイル「jquery.ripples-min.js」をサーバーにアップロードして、HTMLの適当な箇所で読み込みます。
このとき先にjQueryの本体ファイルを読み込んでおくことも忘れずに。

以下、今回はbodyタグの最下部で各ファイルを読み込む設定にしました。

<body>
...
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="jquery.ripples-min.js"></script>
</body>
波紋を描かせる要素を作る

続いては波紋を描く要素を作ります。
ここでは仮に、「class=”ripples”」と名付けました。

<div class="ripples">

スタイルシート側では背景画像を指定しておきます。

.ripples {
	background:url("sample.png") center no-repeat;
	background-size:cover;
	display:block;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

背景画像を全面に敷き詰めるためにbackground-size:cover;も追加しています。

初期設定

最後に初期設定を行います。

<script>
$(".ripples").ripples();
</script>

最低限、必要な設定は以上です。

HTMLに記述したコードは次のようになりました。

<body>
<div class="ripples">
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="jquery.ripples-min.js"></script>
<script>
$(".ripples").ripples();
</script>
</body>

このままコピペしても使えますよ。

オプション設定

追加設定では、波紋の大きさや広がりの速度を調整することができます。

<script>
$(".ripples").ripples({
	dropRadius: 20,
	perturbance: 0.03,
	resolution: 256,
	interactive: true,
	crossOrigin: ""
});
</script>

「dropRadius」は波紋の大きさ。
「perturbance」は波紋が生み出すブレ。
「resolution」は波紋の広がりの速度。
それぞれの数値を調整して動きを確かめてみてください。

このプラグインは canvas 要素を生成して、そこに波紋模様を描く仕組みになっています。
唯一の難点としては複雑なHTMLにすると挙動がかなり重くなること。
そしてiPhoneを含むスマートフォンでは挙動しないので注意が必要です。