JavaScript

こんにちは。今回は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
});

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

オプション 説明
color 水の色を指定
waveLength 波長を数値で指定します。
数値が大きいほど、波長は短い。
初期設定は340。
frequency 雨粒の頻度を指定。
数値が大きいほど、雨滴が頻繁に発生。
初期設定は3。
waveHeight 波の高さ。
数値が大きいほど、雨滴によって生成される波が高くなる。
初期設定は100。
density 水の密度。
数値が大きいほど、波紋が短くなる。
初期設定は0.02。
rippleSpeed 波及効果の速度。
数値が大きいほど、波紋が速い。
初期設定は0.1。
canvasWidth canvasの幅。
初期設定は親の幅の100%。
canvasHeight canvasの高さ。
初期設定は親の高さの50%。
rightPadding アニメーションによる、canvasの左右の余白を指定。
初期設定は20。
position canvasに指定されるpositionの値。
初期値は”absolute”。
positionBottom canvasに指定されるBottomの値。
初期値は0。
positionLeft canvasに指定されるLeftの値。
初期値は0。

参考:Raindorops ドキュメント

デモ

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

まとめ

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

※ 2020年6月4日 デモページ追加