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

HOME > JavaScript > rainyday.jsを使ってみる

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';
image 雨を降らせる画像の指定。必須。
parentElement canvasの親要素を指定。デフォルトはbody。
blur 雨によるぼかしの量を指定。デフォルトは10。
opacity 雨粒の不透明度の指定。デフォルトは1。
rain([[min, range, count], … ], ms); 雨粒の指定。
msミリ秒ごとに、min~(min+range)の範囲のサイズで、countの数だけ雨粒が追加される。

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP