Written by Kasumi

【jQuery】背景に波紋アニメーションを実装する方法

サイトの背景に波紋アニメーションを実装したい。

本記事ではJavaScriptのライブラリjQueryjQuery Ripplesを使ってこのような悩みを解決します。

ライブラリを読み込み・ダウンロード

まずはjQueryとjQuery Ripplesを実装環境に読み込みます。

jQuery Ripplesは以下サイト様よりダウンロード可能です。

公式サイト
https://sirxemic.github.io/jquery.ripples/

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

ダウンロードしたらscriptタグを使って環境に読み込みます。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="js/jquery.ripples-min.js"></script>

波紋の実装コード

    <style>
      /*背景のスタイル*/
      div.ripples {
        background-color: #f5f3ee;
        width: 100%;
        height: 100vh;
      }
    </style>
    <!-- 波紋背景 -->
    <div class="div ripples">
    </div>
    <!-- ライブラリを読み込み -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="js/jquery.ripples-min.js"></script>
    <!-- 実装コード -->
    <script>
      // マウスでホバーした箇所に波紋を出す
      $("div.ripples").ripples({
        // 波紋の広かる速さ
        resolution: 512,
        // 波紋の大きさ
        dropRadius: 40,
        // 波紋の揺れの量
        perturbance: 0.04,
      });
    </script>

波紋の実装コード例です。

以下コードだけで波紋を出したい箇所にホバー・クリックすると波紋が出ます。

$("波紋を出したいhtmlタグ名").ripples();

さらに以下オプションを追加するだけで波紋の大きさや揺れなどを調整する事が可能です。

// 波紋の広かる速さ
resolution
// 波紋の大きさ
dropRadius
// 波紋の揺れの量
perturbance

波紋を自動で出力する

      // ランダムで波紋を自動で出す
      setInterval(function () {
        var $el = $("div.ripples");
        var x = Math.random() * $el.outerWidth();
        var y = Math.random() * $el.outerHeight();
        // 波紋の大きさ
        var dropRadius = 30;
        // 波紋の広かる速さ
        var resolution = 0.2;
        // 波紋の揺れの量
        var perturbance = 0.04;
        var strength = 0.04 + Math.random() * 0.04;

        $el.ripples("drop", x, y, dropRadius, resolution, perturbance, strength);
      }, 400);

setInterval関数などを組み合わせて使う事で波紋をランダムに出力する事が可能になります。

以上で実装完了です。

まとめ

jQueryで背景に波紋アニメーションを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

jQuery

タブ切り替えでタブを上下に二つ設置し、連動させる方法

更新日:2022.09.09
5449
jQuery

jQueryを使って簡単にタブ切り替えを実装してみよう

更新日:2022.09.09
879
jQuery

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

更新日:2022.09.09
1667
jQuery

jQueryのdatetimepickerで選択した日付によって時間を変更する方法

更新日:2022.09.09
4228