夏ですね！
例年以上の猛暑が続いている今日この頃。皆様いかがお過ごしでしょうか。

さて。今日は、こんな暑い夏に相応しい「冷涼感」を演出してくれるjQueryプラグインを紹介します。

［Raindrops.js］と名付けられたこのプラグインは、ボックス要素を水面に見立て、降り注ぐ雨の様子を演出します。
まずは実際に使ってみたサンプルをご覧ください。

［jQuery Raindrops.js］実装サンプル

導入方法は比較的簡単です。

［Raindrops.js］の使い方

まずは配布サイトより、プラグインのファイル「raindrops.js」を入手してきましょう。

［Raindrops.js］配布サイト：http://daniellaharel.com/raindrops/

基本的なことですが［Raindrops.js］はjQueryプラグインなので単体では動きません。
別途「jquery.js」と「jquery.ui.js」も必要なります。
両ファイルは以下のURLよりダウンロードできます。

入手してきた計３つのファイルはHTMLの適当な箇所で読み込ませます。

<script src="jquery.js"></script>
<script src="jquery.ui.js"></script>
<script src="raindrops.js"></script>

このとき、各ファイルを読み込む順番にも注意してください。
必ず「jquery」「jqueryui」「raindrops」の順で読み込ませます。

続いて「水面」を表現するためのボックス要素を作ります。

こちらは適当なIDで名付けた div要素 を記述するだけでOKです。
ボックスの背景やサイズなどはスタイルシート側で適当に調節してください。

<div id="sample">
</div>

ここでは仮に id="sample" としました。

最後に、この要素に［Raindrops.js］を効かせるためのコードを記述すれば終了です。

<script>
$(function(){
	$('#sample').raindrops();
});
</script>

具体的には上記のようなコードになりますね。

［Raindrops.js］のオプション設定

もちろん各種オプションを設定することも可能です。

使用できるパラメーターは以下のとおり。

  • color
  • waveLength
  • frequency
  • waveHeight
  • density
  • rippleSpeed
  • canvasWidth
  • canvasHeight
  • rightPadding
  • position
  • positionBottom
  • positionLeft

オプションの指定は以下のように記述していきます。

$(function(){
$('#test-01').raindrops(
	{color:'#999', rippleSpeed:0.2, canvasHeight:100}
);
});

以上。ウェブページのワンポイントとして使えそうですね。
ぜひ試してみてください。