【JS】水の波紋のようなエフェクトで演出をする『jQuery Ripples』

画面上に水滴をたらしたようなエフェクト

ホームページの背景に波紋のようなエフェクトを加えてくれるjQueryツールを見つけたのでメモ。随分前から存在して板みたいなのですが、たまたま見つけました。味気ないホームページにちょっとした遊びごころを加えたいときにちょうど良さそうです。

公式ページ

基本ソース例

jQueryとjquery.ripples.jsを読み込んで、以下の設定を加えるだけで設置完了です。任意の#idや.classなどの要素を指定します。画像にマウスカーソルを移すと、カーソルの動きに合わせて水面が波を打ちます。

※imgに直接classやidを指定したら動作しませんでした。以下のデモはスタイルシートでbackground-imageに画像を指定しています。

<style>
div.ripples-1 {
  background-image: url('/blog/images/noimage-448.png');
  width: 448px;
  height: 299px;
}
</style>
<div class="div.ripples-1"></div>

<script src="js/jquery-3.6.0.min.js"></script>
http://js/jquery.ripples-min.js
<script> 
  $('div.ripples-1').ripples();
</script>

カスタマイズした例

以下は波紋の大きさや解像度などを指定した例です。 

<style>
div.ripples-2 {
  background-image: url('/blog/images/noimage-448.png');
  width: 448px;
  height: 299px;
}
</style>
<div class="div.ripples-2"></div>

<script src="js/jquery-3.6.0.min.js"></script>
http://js/jquery.ripples-min.js
<script> 
$('div.ripples-2').ripples({
  	resolution: 512,
   dropRadius: 20,
   perturbance: 0.04,
});
</script>

パラメータ

名前 タイプ ディフォルト 説明
imageUrl string null 背景画像の指定。背景として使用する画像のURL。存在しない場合、プラグインはbackground-image代わりに計算されたCSSプロパティの値を使用しようとします。Data-URIも受け入れられます。
dropRadius float 20 ドロップサイズ。キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズ（ピクセル単位）。
perturbance float 0.03 屈折量。基本的に、リップルによって引き起こされる屈折の量。0は、屈折がないことを意味します。
resolution integer 256 解像度。レンダリングするWebGLテクスチャの幅と高さ。この値が大きいほど、レンダリングがスムーズになり、リップルの伝播が遅くなります。
interactive bool true マウスのクリックとマウスの動きが効果をトリガーするかどうか。
crossOrigin string “” 影響を受ける画像に使用するcrossOrigin属性。詳細については、MDNを参照してください。

（参考ページ：https://github.com/sirxemic/jquery.ripples#options）

自動で実行する例

公式のサイトにもありますが、以下のコードを使用して自動的に水滴を落とすことができます。

$('body').ripples("drop", x, y, radius, strength)

以下が具体的なソース例です。

 

なぜかこの画面上では動かないのですが、まったく同じソースのデモページを用意しました。

デモページ

<style>
div.ripples-3 {
  background-image: url('/blog/images/noimage-448.png');
  width: 448px;
  height: 299px;
}
</style>
<div class="ripples-3"></div>

<script src="js/jquery-3.6.0.min.js"></script>
http://js/jquery.ripples-min.js
<script>
$(document).ready(function() {
  $('div.ripples-3').ripples({
    resolution: 128,
    dropRadius: 10,
    perturbance: 0.04,
    interactive: false
});

// Automatic drops
setInterval(function() {
  var $el = $('div.ripples-3');
  var x = Math.random() * $el.outerWidth();
  var y = Math.random() * $el.outerHeight();
  var dropRadius = 20;
  var strength = 0.04 + Math.random() * 0.04;

  $el.ripples('drop', x, y, dropRadius, strength);
  }, 400);
});
</script>