水面のように動きをつけることができるjQueryプラグイン「Raindrops.js」

公開日：2016/08/02

jQuery プラグイン

仙台は梅雨も終わり、暑い日が続いてます(´・ω・`)
そんな暑い日には、海、プールでしょうかね？

と、いうわけで今回は水面のように動きをつけることができる
jQueryプラグイン「Raindrops.js」をご紹介します。

Raindrops.js
http://daniellaharel.com/raindrops/

下記に「Raindrops.js」を使用する時の手順を説明します！

サンプル

動きはRaindrops.jsのサンプル５を使用しています。

今回、「Raindrops.js」を使用したデモページ！
「Raindrops.js」プラグインを使用したデモページ

たぷたぷ、ぽちゃぽちゃしてて可愛い動きですよね( *´艸｀)

「Raindrops.js」プラグインの使用方法

ファイル読込

下記から「Raindrops.js」をダウンロードします。

「Raindrops.js」
https://github.com/d-harel/raindrops

以下のようにダウンロードしたファイルと、動かすのに必要な「jquery.js」と「jquery.ui.js」を読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/raindrops.js" type="text/javascript"></script>

HTML

今回はwaveというIDに指定していきます。

<div id="wave"></div>

1	<div id="wave"></div>

CSS

枠などをつけているので不要な場合は削除してください。

body{
  background: #f2f5f6;
}
#wave {
    width: 60%;
    height: 600px;
    margin: 80px auto;
    border: 5px solid #fff;
    background: url(../img/boat.png) #dcf5ff;
	background-repeat:no-repeat;
	background-position: center 170px;
}

body{

background: #f2f5f6;

}

#wave {

width: 60%;

height: 600px;

margin: 80px auto;

border: 5px solid #fff;

background: url(../img/boat.png) #dcf5ff;

background-repeat:no-repeat;

background-position: center 170px;

}

JS

パラメーターを指定できます。

$(function(){
	$('#wave').raindrops({
		color:'#4987f5',
		canvasHeight:600,
		rippleSpeed: 0.01,
		frequency: 1,
		density: 0
	});
});

$(function(){

$('#wave').raindrops({

color:'#4987f5',

canvasHeight:600,

rippleSpeed: 0.01,

frequency: 1,

density: 0

});

color・・・水の色。
waveLength・・・波の長さ、数が高いほど波長小さくなる。
frequency・・・周波数、数値が高いほど、より頻繁に動く。
waveHeight・・・波の高さ。
density・・・密度、数値が大きいほど短く波紋する。
rippleSpeed・・・値が大きいほど速く波紋する。
canvasWidth・・・水の幅。
canvasHeight・・・水の高さ。

などなど、他にもいろいろあります！