以前は、Rain Drop EffectでAdobeのFlashを作成

AdobeのFlashのサポートが2020年に終了することに伴い、今では、AdobeのFlashを使ってのアニメーションはほとんど見ることはなくなりましたが、以前、Rain Drop Effectという有償プラグインを使って水面の波紋が拡がるような効果を演出していました。

jQuery Ripplesで画像に水面の波紋が拡がるような動きを加える!

▼画像上で、マウスを移動すると水面のように揺れ、クリックすると波紋が拡がるような動きをする効果のあるプラグインです。
※スマートフォン、タブレットなどは非対応。

jQuery Ripplesの設定方法

最初にGitHubのサイトからjQuery Ripplesのプラグインをダウンロードします。ファイルの解凍後、distフォルダ内にあるjquery.ripples-min.jsをサーバー上にアップロードします。jQueryの本体ファイルも読み込みますので、htmlファイルのbodyタグの下部に各ファイルを読み込む設定を行います。

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

次に背景画像を設置する箇所をhtmlファイルに指定します。ここでは、class=”sample_01″と設定。

  • <div class=”sample_01″>

CSSでは、背景画像のサイズとファイル名などを指定します。

  • .sample_01 {
    width: 650px;
    height: 500px;
    background: url(img/jquery-ripples_01.jpg) no-repeat;
    }

最後にjQuery Ripplesを動かすためのスクリプトをhtmlファイルに記述します。

  • <script>
    $(function(){
    let $ripp = $(‘.sample_01’);
    $ripp.ripples({
    resolution: 250,
    dropRadius: 20,
    perturbance: 0.05
    });
    });
    </script>

▼オプション設定
resolution　　波紋の広がりの速度（値が大きいほど速度が遅くなる）
dropRadius　 波紋の大きさ（値が大きいほど波紋が大きくなる）
perturbance　波紋が生み出すブレ（値が大きいほどブレが大きくなる）