今回解説するのは、カーソルの動きに合わせて水面に波紋が広がるようなエフェクトを実装できる『Ripples』という、jQueryのプラグインになります。
これは、カーソルを動かしたり、クリックすることで波紋を発生させられます。
（有料になっていたらすいません🙇♂️）
Ripplesで水面に広がる波紋エフェクトを作る方法
RipplesはjQueryのプラグインなので、jQueryを読み込む必要があります。
jQueryを使ったことがない人は、まずは以下の記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
また、RipplesはiPhoneではタップすれば反応しますが、パソコンと違ってカーソルの移動などはないので、スマホではOFFにしておいた方がいいかも知れません。
それでは解説していきます。
CDNでRipplesを読み込む
Ripplesを使うには、ファイルをダウンロードして読み込むか、CDNを使います。
今回はCDNを使って読み込みますが、ファイルをダウンロードして使いたい人は、以下のページからファイルをダウンロードして下さい。
sirxemic/jquery.ripples: Add a water ripple effect to your background using WebGL.
そしてCDNで読み込む方法ですが、CDNは以下のページに最新版が載っています。
jquery.ripples CDN by jsDelivr - A CDN for npm and GitHub
Ripples：CDN
HTMLでは、body閉じタグあたりでjQueryと一緒に読み込みましょう。
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Ripples -->
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>
</body>
コード解説
それではコードを解説していきます。
HTMLとCSSは特に変わったところはありませんが、今回のポイントとしては『画面全体であるbodyタグの背景画像が対象』ということくらいです。
デモに使うCodePenですが、bodyタグはすでに書かれている状態なので、自分では省略しています。
<section>
<h1>じゅんぺいブログ</h1>
</section>CSSも変わった点はありませんが、bodyタグのコードだけ載せておきます。
body {
background-image: url(背景画像パス);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
min-height: 600px;
padding-top: 50px;
width: 100%;
}全てのコードが見たい場合は、CodePenの左上にある『HTML / CSS / JS』をクリックして下さい。
そして重要なのがJavaScriptですが、最低限のコードはこちらです。
$("セレクタ名").ripples();今回はbodyタグなので、こうなります。
$("body").ripples();もし以下のsectionタグに適用する場合は、
<section class="sample">
<h1>じゅんぺいブログ</h1>
</section>こうなります。
$(".sample").ripples();こちらがデモになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
全体の背景画像にだけ、Ripplesが適用されていて、前面にあるsection要素に関しては適用されていないのが分かります。
カーソルを動かすだけではなく、クリックしても反応するので試してみて下さい。
大きな画面で見たい場合は、右上の『EDIT ON CODEPEN』をクリックして下さい。
Ripplesのオプション
先ほどは最低限のコードでしたが、オプションがいくつかあります。
| オプション名 | 初期値 | 効果 |
| dropRadius | 20 | 波紋の大きさ（値が大きいほど大きくなる） |
| perturbance | 0.03 | 波紋による屈折量（値が大きいほどブレる） |
| resolution | 256 | 波紋の広がりの速度（値が大きいほど遅くなる） |
書き方はこちらです。
$("body").ripples({
dropRadius: 20, // 波紋の大きさ（値が大きいほど大きくなる）
perturbance: 0.03, // 波紋による屈折量（値が大きいほどブレる）
resolution: 256, // 波紋の広がりの速度（値が大きいほど遅くなる）
});それでは、1つずつ数値を変えた状態で見てみたいと思います。
dropRadius（20 → 100）
$("body").ripples({
dropRadius: 100, // 波紋の大きさ（値が大きいほど大きくなる）
});See the Pen
Ripplesで水面に広がる波紋エフェクト（） by junpei (@junpei-sugiyama)
on CodePen.
デフォルトより、かなり大きく揺れているのが分かります。
dropRadius（20 → 5）
$("body").ripples({
dropRadius: 5, // 波紋の大きさ（値が大きいほど大きくなる）
});See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
デフォルトより、揺れが小さいのが分かります。
perturbance（0.03 → 0.1）
$("body").ripples({
perturbance: 0.1, // 波紋による屈折量（値が大きいほどブレる）
});See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
デフォルトより、激しく揺れているのが分かります。
perturbance（0.03 → 0）
$("body").ripples({
perturbance: 0, // 波紋による屈折量（値が大きいほどブレる）
});See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
デフォルトより、揺れが静かなのが分かります。
resolution（256 → 700）
$("body").ripples({
resolution: 700, // 波紋の広がりの速度（値が大きいほど遅くなる）
});See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
デフォルトより、ゆっくり動いているのが分かります。
resolution（256 → 100）
$("body").ripples({
resolution: 100, // 波紋の広がりの速度（値が大きいほど遅くなる）
});See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
デフォルトより、早く動いているのが分かります。
まとめ
今回は、Ripplesを使ってカーソルの動きに合わせて水面に波紋が広がるようなエフェクトを実装する方法を解説しました。
使う機会はほとんどなさそうですが、実務では1回だけ使ったことがあるので、コーダーやデザイナーは引き出しの1つとして知っておいて損はないかと思います。
あとはオプションで好みの揺れ具合に調整してみましょう。
以上になります。
を表現する方法を解説。オプションごとのデモとコ){kind=link}