今回は、インタラクティブな波紋エフェクトを実装できるjQueryプラグイン「jQuery Ripples」のご紹介です。サンプルを使いつつ「jQuery Ripples」の導入や使い方を詳しくご紹介していきます。

「jQuery Ripples」とは？

「jQuery Ripples」は、WebGL の機能を利用して、水が滴るようなインタラクティブエフェクトを提供してくれるjQueryのプラグインです。 jQuery WebGL Ripples

「jQuery Ripples」を実際に採用しているウェブサイト

【公式】8 THE THALASSO（エイトザタラソ）

「jQuery Ripples」の採用事例です。波紋エフェクトで「潤い」を連想するような演出。美容系のウェブサイトにぴったりですね。

「jQuery Ripples」の導入方法

「jQuery Ripples」の導入は、「jQuery」と「Ripples」を組み込むだけ。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>

今回はCDNで対応していますが、バンドルツールを使用している場合は、スクリプトをバンドルにインポート。ローカルでホスティングしたい場合は、下記からダウンロードしてください。

jQuery : https://code.jquery.com/jquery-3.7.1.min.js
jQuery Ripples : https://github.com/sirxemic/jquery.ripples/blob/master/dist/jquery.ripples-min.js

「jQuery Ripples」の基本的な使い方

下記が基本的な書き方のフォーマットになります。オプションを使用することで動作の微調整も可能です。

$("要素").ripples();

オプション	説明
imageUrl	背景として使用する画像のURL
dropRadius	ドロップのサイズ (ピクセル単位)
perturbance	波紋によって引き起こされる屈折量
resolution	レンダリングする WebGLテクスチャの幅と高さ
interactive	マウスベントでエフェクトを呼び出すかどうか

参考 : https://github.com/sirxemic/jquery.ripples?tab=readme-ov-file#options

「jQuery Ripples」の基本的な使い方 – サンプル

まず要素を追加してCSSで背景画像を作ります。背景画像は、imageUrlオプションで指定することも可能です。

<div class="ripple"></div>

.ripple {
  background-image: url(https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?q=80&w=2253&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}

「jQuery Ripples」のフォーマットに従ってスクリプトを記述します。

$(".ripple").ripples();

「jQuery Ripples」の応用的な使い方

「jQuery Ripples」は、インタラクティブエフェクトを提供してくれるプラグインなので、デフォルト設定だとマウスイベントがない限りエフェクトが呼び出されません。先ほどご紹介した【公式】8 THE THALASSO（エイトザタラソ）のように、常にエフェクトを呼び出したい場合はメソッドを使用して対応します。

メソッド	説明
drop	要素の相対座標 (x, y) にドロップを手動で追加
destroy	要素から効果を削除
hide / show	エフェクトの表示/非表示を切り替え
pause / play	シミュレーションの一時停止・再生
set	プロパティをセット

参考 : https://github.com/sirxemic/jquery.ripples?tab=readme-ov-file#methods

「jQuery Ripples」の応用的な使い方 – サンプル

要素を追加してCSSで背景画像を作るところまでは同じです。今回はユーザーのアクションに対するインタラクティブなエフェクトではなく、自動で呼び出されるエフェクトにしたいので、オプションでインタラクティブをオフにしておきます。

$('.ripple').ripples({
  interactive: !1,
});

dropメソッドを使い、要素のランダムな座標にエフェクトを呼び出します。

const x = Math.random() * $('.ripple').outerWidth();
const y = Math.random() * $('.ripple').outerHeight();
const dropRadius = 80;
const strength = 0.04 + Math.random() * 0.04;
$('.ripple').ripples('drop', x, y, dropRadius, strength);

ずっとエフェクトが続いてしまうので、タイマー処理などで停止させます。これで0.5秒間隔で、ランダムな座標に計3秒間エフェクトが発生します。

let count = 0;

const f_drop = setInterval(() =>{
  const x = Math.random() * $('.ripple').outerWidth();
  const y = Math.random() * $('.ripple').outerHeight();
  const dropRadius = 80;
  const strength = 0.04 + Math.random() * 0.04;
  $('.ripple').ripples('drop', x, y, dropRadius, strength);

  count++;
  if(count > 5){ clearInterval(f_drop);}
},500);

まとめ

いかがでしたでしょうか。今回は波紋エフェクトを実装できるjQueryプラグイン「jQuery Ripples」のご紹介でした。応用編で紹介した、インタラクティブではない「jQuery Ripples」の使い方はあまり情報がなかったので、試しに実装してみました。ご参考になれば幸いです。