ブラウザに雨を降らすことができるrainyday.jsを使ってみたよ!

ちょっと前に話題になった「rainyday.js」というスクリプトを最近知ったんですが、早速使ってみました。

rainyday.jsとは?

Marek Brodziak氏が開発したJavaScriptのライブラリで、かなりリアルに雨の水滴がブラウザに表示され、雨水が滴る様子まで再現することを可能とします。

HTML5のcanvas機能を使用してレンダリングしているんですが、本当に綺麗に表示されるので見事の一言です!ずっと見てられますねw

rainyday.js demo

公式サイトとgituhubのURLは下記になります。

ブラウザに雨を降らすことができるrainyday.jsを使ってみたよ!

ブラウザに雨を降らすことができるrainyday.jsを使ってみたよ!

対応ブラウザ

公式サイトを見ると対応ブラウザは下記となっています。

  • Internet Explorer 8 and below
  • Internet Explorer 9
  • Internet Explorer 10
  • Firefox 23 and below Firefox 24
  • Safari 5.1
  • Google Chrome 27 and below Google Chrome 28 Google Chrome 29 Google Chrome 30
  • Opera 11.60 Opera 12.00 Opera 12.16 Opera mobile Konqueror 4.10.5
  • Android 4
  • Chrome mobile
  • Safari mobile

上記以外に僕が確認したところ、下記も動作OKでした。

  • Win7のIE11
  • Win7/Mac OSX Yosemite及びEl Capitan‎のChrome、Firefoxそれぞれ最新版
  • MacのSafari最新版
  • iPhone6のChrome最新版とSafari最新版
  • Android4及び5

デモどおりの使い方

/dist/rainyday.min.js

を読み込んだ上で、

<script>
	function demo() {
		var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight);
		engine.gravity = engine.GRAVITY_NON_LINEAR;
		engine.trail = engine.TRAIL_DROPS;

		engine.rain([
			engine.preset(0, 2, 500)
		]);

		engine.rain([
			engine.preset(3, 3, 0.88),
			engine.preset(5, 5, 0.9),
			engine.preset(6, 2, 1),
		], 100);
	}
</script>

のようにscriptタグ内に記述するか、外部ファイルとして読み込みます。

その上で、bodyタグのonloadを指定します。

	<body onload="demo();">


	</body>

こんな書き方もいけます

/dist/rainyday.min.js

を同様に読み込み、下記のような外部ファイルを用意します。
※僕のような素人が書いたので、冗長な書き方は直してくださいね。

これならbodyタグにIDを振らなくても動作します。

	$(function () {
		// 4パターンの雨の表示方法をランダムで切り替える
    var val = Math.ceil( Math.random()*4 );
    if(val == 1) {
        run1();
    } else if(val == 2) {
        run2();
    } else if(val == 3) {
        run3();
    } else {
        run4();
    }
	});

	function run1() {
	    var image = document.getElementById('background');
	    image.onload = function() {
	        var engine = new RainyDay({
	            image: this,
	            position: 'fixed',
	        });
	        engine.rain([ [1, 2, 500] ]);
	        engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
	    };
	    image.crossOrigin = 'anonymous';
	    image.src = '/img/rain/img_rain_bg01.jpg';
	}

	function run2() {
 		...say anything...
	}

	function run3() {
 		...say anything...
	}

	function run4() {
 		...say anything...
	}

position: 'fixed'」オプションを付けることで、デフォルトのabsoluteから変更できました。

さらに、HTML内で好きなところに

<img id="background" alt="" src="" />

を記述します。bodyタグの直下じゃなくてもいいのです。

さらにcssはこんな感じ。

img#background {
  position: fixed;
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  z-index: 0;
  top: 0;
  left: -100%;
}
canvas {
  width: 100%;
  height: auto;
  z-index: 1;
}

もしcanvasにidを付けたい場合は、「/dist/rainyday.min.js」を変更してくださいね。

img#backgroundをbodyタグの直下ではなく、好きなところに記述すると、多分元の画像と雨の降っている画像が2枚表示されてしまいます。

元の画像は非表示にしたいのですが、「display:none;」を指定すると雨の降っている画像まで非表示になってしまうので、「left: -100%;」で画面から非表示にしてみました。

「width: 100%;」と「height: auto;」を指定することで、画面いっぱいに表示します。

rainyday.jsのデモ 「ENDLESS RAIN」

僕が開発・運営している「おと風景」上に、

ENDLESS RAIN

という機能を実装してみました。

こういう遊び的なノリで、なんか面白そうな機能をどんどん実験的に開発してみたいです。

rainyday.jsのライセンス

スクリプトを確認すると

Licensed under the GPLv2 license

と記載されていました。このライセンスは下記のようになります。

GPL v2

Required(必須)
ソースの開示、著作権の表示、変更箇所の表示

Permitted(許可)
商用利用、配布、特許許可、私的利用

Forbidden(禁止)
責任免除、サブライセンス

 

このスクリプトを使って何かできたら紹介しますので、ご連絡くださいね!!

あと、この記事にもしも指摘があれば、TwitterなどでURL付きでつぶやいてください。エゴサーチして絡みにいきます。

以上、「rainyday.js」の紹介でした!
 

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景