サイト制作に関するメモ書き

HOME > JavaScript > jQuery > Raindrops.jsを使ってみる

Raindrops.jsを使ってみる

雨が水面に落ちたような演出のできるjQueryプラグイン「Raindrops.js」の使い方をメモ。

使い方

raindrops.jsは下記からダウンロードできます。
GitHub – raindrops

ダウンロード後、HTML内に必要なファイルを読み込みます。
raindrops.jsはjQuery UIも必要なので、合わせて読み込んでください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="raindrops.js"></script>

HTML

埋め込む要素を用意します。

<div class="sample"></div>

CSS

幅と高さの指定が必要らしいので指定しておきます。

.sample {
	width: 600px;
	height: 100px;
}

JavaScript

$(function() {
	$('.sample').raindrops();
});

Raindrops.jsのデモページ
 

オプション

オプションについて詳しくは、公式のドキュメントをご確認ください。

HTML

<div class="sample sample01"></div>
<div class="sample sample02"></div>
<div class="sample sample03"></div>
<div class="sample sample04"></div>
<div class="sample sample05"></div>
<div class="sample sample06"></div>
<div class="sample sample07"></div>

JavaScript

$(function() {
	$('.sample01').raindrops({
		color: '#333333'
	});
	$('.sample02').raindrops({
		waveLength: 1000
	});
	$('.sample03').raindrops({
		frequency: 10
	});
	$('.sample04').raindrops({
		waveHeight: 400
	});
	$('.sample05').raindrops({
		density: 0.1
	});
	$('.sample06').raindrops({
		rippleSpeed: 0.4
	});
	$('.sample07').raindrops({
		rightPadding: 0
	});
});

オプション設定のデモページ

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のpositionのbottomの値を指定。
初期値は0。
positionLeft canvasのpositionのleftの値を指定。
初期値は0。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP