【raindrops】水面に雨が落ちるようなデザインが可能なjQueryプラグインを使ってみた【おしゃれ】

2021.09.05

当ページのリンクには広告が含まれています。

執筆現在とても暑い夏を過ごしております。

こういう時にはWeb制作に少しでも清涼感をプラスして遊び心を加えたくなります。笑

ということで本日はWebサイトをおしゃれにでき、清涼感もプラスできるjQueryプラグインを紹介したいと思います。

その名も「raindrops」

水面に水滴が落ちたときの波紋のような動きをWebサイトにつけることができます。

簡単に導入できますので、ぜひお試しください。

コードを利用する際の注意事項

当ブログのコードを利用して起こる不具合については対応できませんのでご了承ください。
本記事の内容を参考にブログ等で情報発信をする場合には、下記のルールを確認頂きたいと思います。

当ブログのコードを引用する場合のルール【コードの著作権】

raindropsとは

百聞は一見に如かずということで、まずはこちら公式サイトをご覧ください。

公式HP

Raindrops.js

水面に水が落ちたときの波紋を横から見たイメージでしょうか。

フッターにつけてもおしゃれに仕上がりますし、アイデア次第ではいろいろできそうですね。

導入準備

下記のGithubからraindropsをダウンロードしhtmlに読み込みます。

raindropsダウンロード-Github

また、raindropsはJQueryで記述されているので、「JQuery」と「JQuery UI」の導入も必要になります。

下記のようにJQueryとraindropsを参照します。

<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="js/raindrops.js"></script>

私は「js」フォルダにダウンロードした「raindrops」を配置しましたので、上記のようなファイル参照にしています。

JQueryは面倒だったのでCDNで参照です。

これで使えるようになっていますので、実際に記述していきます。

使い方

表示だけであれば下記の記述だけで表示できてしまいます。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="js/raindrops.js"></script>
        <script>
            $(function(){
                $('#drop').raindrops();
            });
        </script>
        <style>
            #drop {
                height:50px;
            }
        </style>
    </head>
    <body>
        <div id="drop"></div>
    </body>
</html>

まずは19行目記述のdivタグでraindropsを表示させるひな形を作ります。

id属性だけ指定しておけばOKです。

8～10行目が実際の動作部分の記述になります。

13～16行目では高さの指定を行っています。

この指定がないと表示されませんでした。

オプション

様々なオプションが用意されていますので、使い方を説明します。

scriptタグ内に記述したraindrops作成処理の中に設定を追記します。

下記のイメージです。

$(function(){
    $('#drop').raindrops({
        color: '#000000',  //水面の色
        frequency: 1      //水滴の頻度
    });
});

上記では、水面の色と波紋が発生する頻度を設定しています。

他にもさまざまな設定項目があるので、下記にまとめました。

パラメーター	説明	初期値
color	水面の色。	#00aeef
waveLength	波長。数値が大きいほど、波長は短くなります。	340
frequency	水滴の頻度。数値が大きいほど、水滴が頻繁に発生します。	3
waveHeight	波の高さ。数値が大きいほど、雨滴によって生成される波が高くなります。	100
density	波紋の広がり。数値が大きいほど、波紋が短くなります。	0.02
rippleSpeed	波紋の速度。数値が大きいほど、波紋が速くなります。	0.1
canvasWidth	水面の幅。	親要素の100%
canvasHeight	水面の高さ。	親要素の50%
rightPadding	アニメーションによって作成された余白調整用。	20
position	キャンバスの位置。	absolute
positionBottom	波の下からの位置。	0
positionLeft	波の左からの位置。	0

使ってみた

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="js/raindrops.js"></script>
        <script>
            $(function(){
                $('#drop').raindrops({
                    color: '#000000',  //水面の色
                    canvasHeight: 20,  //水面の高さ
                    frequency: 1       //水滴の頻度
                });
            });
            //raindropsが幅固定になるので、画面リサイズで幅調整できるように対応
            $(window).resize(function(){ $('canvas').width($(window).width()+10);})
        </script>
        <style>
            #drop {
                height:50px;
            }
            #footer {
                height:100px;
                background-color: #000000;
            }
            body {
                margin:0px;
            }
        </style>
    </head>
    <body>
        <div id="drop"></div>
        <!-- raindropsだけでフッターを作ると波紋の調整とかコンテンツ表示などが面倒 -->
        <!-- 上辺だけ揺れるようにしfooterの大部分は別のDivタグにする -->
        <div id="footer"></div>
    </body>
</html>

ポイントとしては２点です。

①揺れる水面部分とそれ以下の余白部分は分けて作成する。

raindropは飾り付けでその下にコンテンツがあるような場合、raindropsだけでサイズ調整するのは面倒です。

素直にわけて作成する方が良いと思います。

②ウインドウサイズの変更に対応してくれない。

小さい画面サイズから全画面表示に変えるような操作をすると、raindropsの横幅が変わらずおかしな感じになります。

とりあえず画面サイズが変わったらcanvasの横幅を合わせるように対策しました。

上記コードだと16行目です。

もっといい方法があるかもしれませんが分かりませんでした。