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
	});
});

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

【参考サイト】

• Raindrops.js