「jQuery Ripples」の基本から応用まで。波紋エフェクトでインタラクティブな体験を作ろう！

今回は、波紋エフェクトを実装できるjQueryプラグイン「jQuery Ripples」のご紹介です。サンプルを使いながら「jQuery Ripples」の導入や使い方を、基本から応用まで詳しくご紹介していきます。

「jQuery Ripples」とは？

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

jQuery WebGL Ripples

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

「jQuery Ripples」の採用事例をご紹介します。実装イメージの参考にしていただけたらと思います。

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

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

「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();

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

「jQuery Ripples」の基本的な使い方 – マウスイベントによる呼び出し

See the Pen jQuery Ripple Demo 001 by ECHOVISION STUDIO (@ECHOVISION-STUDIO) on CodePen.

まず要素を追加して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」の応用的な使い方 – ロードやスクロールによる自自動呼び出し

See the Pen jQuery Ripple Demo 002 by ECHOVISION STUDIO (@ECHOVISION-STUDIO) on CodePen.

「jQuery Ripples」は、デフォルト設定だとマウスイベントがない限りエフェクトが呼び出されません。先ほどご紹介した【公式】8 THE THALASSO（エイトザタラソ）のように、常にエフェクトを呼び出したい場合は波紋の回数をカウントし、setIntervalで一定間隔ごとにコードを繰り返し実行します。

先に完成系のコードを貼っておきます。後ほど細かく解説していきます。

(() => {
  let count = 0;
  const $rippleContainer = $('.ripple__animation');

  // 初期判定
  if ($rippleContainer.length === 0) {
    return;
  }

  const width = $rippleContainer.outerWidth();  // コンテナの幅
  const height = $rippleContainer.outerHeight(); // コンテナの高さ

  // 初期化時に interactive: false を設定
  $rippleContainer.ripples({
    interactive: false,
  });

  let intervalId = setInterval(function () {
    count++;
    let x, y;

    // 配置変更: 左20%、上10%など
    if (count === 1) {
      x = width * 0.2; y = height * 0.1;
    } else if (count === 2) {
      x = width * 0.94; y = height * 0.9;
    } else if (count === 3) {
      x = width * 0.56; y = height * 0.32;
    } else if (count === 4) {
      x = width * 0.18; y = height * 0.9;
    } else if (count === 5) {
      x = width * 1; y = height * 0;
    }

    const strength = 0.1;  // 波紋の強度
    const dropRadius = 40;  // 波紋の半径
    $rippleContainer.ripples('drop', x, y, dropRadius, strength);

    // 5回実行後に停止
    if (count >= 5) {
      clearInterval(intervalId); // タイマー停止

      // CSSアニメーションでフェードアウト（2秒かけて透明に）
      $rippleContainer.css({
        'transition': 'opacity 2s ease',
        'opacity': '0'
      });

      // フェードアウト後に波紋を破棄
      setTimeout(() => {
        $rippleContainer.ripples('destroy');  // 波紋エフェクトの破棄
      }, 2000); // 2秒後に破棄
    }
  }, 300); // 0.3秒ごとに実行
})();

即時関数について

コードのスコープを閉じ込め、グローバル変数の汚染を防いでおきます。

(() => { ... })();

変数の宣言

count は、波紋を生成した回数を追跡するための変数です。$rippleContainer は波紋を表示したいHTML要素（.ripple__animation）を jQuery を使って取得しています。

let count = 0;
const $rippleContainer = $('.ripple__animation');

要素が存在しない場合の終了処理

if 文で対象要素が存在しない場合は処理を停止し、エラーを防ぎます。

if ($rippleContainer.length === 0) return;

要素のサイズを取得

outerWidth() と outerHeight() は、jQuery のメソッドで要素の幅と高さを取得します。これらを使って波紋の描画するキャンバスを決定します。

const width = $rippleContainer.outerWidth();
const height = $rippleContainer.outerHeight();

波紋エフェクトの初期化

ripples() メソッドは、Ripplesプラグインを使って波紋エフェクトを適用します。interactive: false に設定することで、ユーザーの操作では波紋が生成されないようにしています。

$rippleContainer.ripples({
  interactive: false,
});

波紋の自動発生（setInterval）

setInterval 関数で0.3秒ごとにインターバル処理を繰り返します。

let intervalId = setInterval(function () { ... }, 300);

カウントが5回に達したらインターバル処理を停止させます。

if (count >= 5) {
  clearInterval(intervalId);

波紋の座標設定

波紋が発生する座標（x, y）を5回分設定しています。

if (count === 1) {
  x = width * 0.2; y = height * 0.1;
} else if (count === 2) {
  x = width * 0.94; y = height * 0.9;
} ...

x, y	波紋を発生させる位置（左上からの割合で計算）
dropRadius	波紋の半径
strength	波紋の強さ

波紋エフェクトの終了処理 – フェードアウトと破棄

2秒かけて波紋コンテナを透明化させ、フェードアウト完了後に波紋エフェクトを破棄しています。

$rippleContainer.css({
  'transition': 'opacity 2s ease',
  'opacity': '0'
});

setTimeout(() => {
  $rippleContainer.ripples('destroy');
}, 2000);

さいごに

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