背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグイン「jQuery Ripples」

jQuery Ripplesは、背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグインです。

挙動については、以下デモページにてご確認ください。画像にマウスを乗せたり、クリックすると波紋が広がります。

jQuery Ripplesの導入手順

まずは、GitHubからjQuery Ripplesをダウンロードします。ダウンロードしたファイルを解凍し、distフォルダ内にあるjquery.ripples-min.jsをサーバー上にアップロードします。

jQuery本体とjquery.ripples-min.jsを読み込みます。


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

上記コードは、</body>の直前に追加すればOKです。

背景画像を設置する箇所のHTMLをマークアップします。シンプルにdiv要素のみにしています。

<div class="sample"></div>

CSSで背景画像を設置します。


.sample {
 width: 960px;
 height: 640px;
 background: url(images/sample.jpg) no-repeat;
}

最後にjQuery Ripplesを動かすためのスクリプトを記述します。jQuery本体とjquery.ripples-min.jsよりも後に記述してください。


<script>
$(function(){
 let $ripp = $('.sample');
 $ripp.ripples({
 resolution: 300,
 dropRadius: 30,
 perturbance: 0.06
 });
});
</script>

「.sample」の部分は、背景画像を設置している箇所のクラスやIDを指定します。

オプションのresolutionは、値が大きいほど波紋がより広がります。初期値は256です。dropRadiusは、波紋のサイズです。初期値は20。perturbanceは屈折量で、初期値は0.03です。

不思議な効果を加えることができますね。ちょっと変わった動きを加えたいと思ったら、ぜひお試しください。