【Raindrops.js】水面の動きを表現したプラグインの使い方【JQuery】

こんにちは。今回はRaindrops.jsという、水面の動きを表現したプラグインをご紹介いたします。
このプラグインは雨が水面に滴るような動きを表現しており、清涼感を表現することができそうですね！
では、さっそく使い方をご紹介いたします。

HTMLで形を作る

今回は簡単にdivで表現枠を作成しています。

<div class="wrapper">
    // canvas_wrapperクラスのdivにJQueryで動きをつけたcanvasが設定されます。
    <div class="canvas_wrapper">
    </div>
</div>

CSSでスタイルを設定

cssでdivタグにサイズを設定するのと、動きを分かりやすくするため、画像と背景色を設定します。

// divを中央寄せ
.wrapper {
    max-width: 1024px;
    margin: 0 auto;
}

.canvas_wrapper {
    // サイズの設定
    max-width: 1024px;
    height: 600px;

    // お好みで背景の設定をしてください。
    background: url(../img/main_visual.jpg) center center / cover no-repeat #fff;
}

htmlへjsファイルの読み込みを設定

今回指定するのは、4つのjsファイルです。

• JQuery　（ライブラリ）
• JQuery UI　（ライブラリ）
• Raindrops　（プラグイン）
• オプション設定用のjsファイル

今回はRaindrops.jsプラグインを使用するため、別途JQuery、JQuery UIのライブラリが必要になります。

HTMLへの設定は、
Google Ajax Libraries API を使用して、ライブラリの読み込みを設定しています。

Raindrops.jsプラグインは、
こちらからダウンロードして読み込みの設定をしましょう。

読み込み設定注意点として、読み込む順番にも決まりがありますので、以下の順番で設定してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/raindrops.js"></script>
<script src="js/style.js"></script>

JSファイルにオプションを設定

HTMLのdivタグに設定した、canvas_wrapperクラスに対し、Raindropsのオプションを設定したら、簡単に表現することができました。

$(function(){
	$(".canvas_wrapper").raindrops();
});

Raindropsのオプション

このように指定することで、詳細なオプションを設定することができます。

$(".canvas_wrapper").raindrops({
    color:"#fff",
    canvasHeight:200,
    rippleSpeed: 0.05,
    density: 0.04
});

オプションの設定については以下の通りです。

デモ

デモページはこちらです。

まとめ

今回はJqueryのプラグイン【Raindrops.js】について、ご紹介しました。
組み込みも設定も簡単にできるので、ぜひ参考にして、試してみてください！