rainyday.jsを使ってみる

雨が降っているような表現ができるライブラリ「rainyday.js」を使ってみます。

使い方

下記からダウンロードできます。
GitHub – maroslaw/rainyday.js: Simulating raindrops falling on a window

ダウンロード後、rainyday.jsを読み込みます。

<script src="rainyday.js"></script>

HTML

<div id="wrapper">
	<img src="" width="960" id="photo">
</div>

JavaScript

var photo = document.getElementById('photo');
// 画像読み込み後の処理
photo.onload = function() {
	// rainyday.jsの設定
	var engine = new RainyDay({
		image: photo // 雨を降らせる画像の指定
	});
	// 雨粒の設定
	engine.rain([
		[3, 3, 1] // サイズが3～6の雨粒を1滴追加する
	], 100); // 0.1秒ごとに雨粒追加を実行
};
// 画像のsrcを指定
photo.src = 'img.jpg';

rainyday.jsのデモページ
　

オプション・メソッド

How to useに記載されているものからいくつか試してみます。

オプション・メソッド設定のデモページ

JavaScript

var photo = document.getElementById('photo');
var wrapper = document.getElementById('wrapper');

photo.onload = function() {
	var engine = new RainyDay({
		image: photo,
		parentElement: wrapper,
		blur: 12,
		opacity: 0.7
	});
	// 雨粒の設定
	engine.rain([
		[1, 2, 8000]
	], 500);
	engine.rain([
		[3, 3, 0.88],
		[5, 5, 0.9],
		[6, 2, 1]
	], 100);
};
photo.src = 'img.jpg';

【参考サイト】

• rainyday.js
• GitHub – maroslaw/rainyday.js: Simulating raindrops falling on a window