利用するのはjQueryプラグインの『Ripples』です。

読み込みからはじめよう

まずは「jQuery」を読み込みます。

そして、Githubから「jquery.ripples-min.js」をダウンロードしてきて読み込みます。

「jquery.ripples-min.js」は下記のGithubのURLからダウンロードができます↓

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery.ripples-min.js"></script>

もしくは、下記のCDNで読み込んでください。

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

エフェクトを入れる要素を追加

次にHTML側で波紋のエフェクトを加える要素を作ります。

<div class="area"></div>

Ripplesの設定をする

次はRipplesの設定をしていきますが、

難しい設定は無く、こちらの１行でOKです。

$(.area).ripples();

オプションの設定

Ripplesの設定が終われば、あとは関数にオプションを設定していくだけという、

なんとまあ、ありがたいプラグインになっております。

オプションは公式ドキュメントのREADMEを参照していただければと思います。

いくつか、波紋の大きさや広がる速度など、

重要なオプションの設定をしてみたコードがコチラになります。

$('.area').ripples({
    dropRadius: 20, //波紋の大きさ
    resolution: 500, //波紋の広がり速度
    perturbance: 0.5 //波紋のブレ
});

プレビュー画面上をクリックしたり、マウスを動かしたりすると、

水面で波紋が広がるようなエフェクトがかかるのではないでしょうか。

オプションを触ってみる

最後に下記のように少しオプションをいじってみます。

$('.area').ripples({
    dropRadius: 10, //波紋の大きさ
    resolution: 600, //波紋の広がり速度
    perturbance: 0.001 //波紋のブレ
});

波紋を小さくして、広がり速度を上げ、ブレを少し抑えるとどうなるでしょうか。

少し小刻みな波紋になりました。アメンボが水面をスイスイと動くのを彷彿とさせます。

最後に

波紋の調節の仕方によって、いろいろな使い方ができると思います。

全体的にエフェクトをかけるも良し、部分的な演出としてかけるも良しです。

雨や水面・海など使いどころは限られると思いますが、

簡単に波紋のエフェクトが実装できるので是非、使ってみてください。

ところで…ロジカルスタジオではフロントエンドエンジニアを募集しております。

一緒に新しい波を作っていきませんか？コチラからご応募お待ちしております↓