梅雨だから雨を降らせるJavaScript「rainyday.js」を使って雨降る画面を眺めてみる

公開日：2016/06/24

JavaScript

毎日のように、どーんよりしている梅雨の時期。
仙台もほぼ毎日どーんよりしています。

でも窓から雨を眺めるのは、なんか嫌いじゃない(*’ω’*)←
そんな方もいるのでは？

なんと、それが再現できるJavaScriptがあるんです！

今回は、その雨を降らせるJavaScript「rainyday.js」を使って
雨降る画面を眺めてみたいと思います。

そのJavaScriptとは「rainyday.js」

雨がガラス戸にあたっている様子再現することができ、
窓から雨を眺めているような雰囲気を味わうことができます。

雨降る画面を眺めてみる

下記のページから「rainyday.js」をダウンロードします。

http://maroslaw.github.io/rainyday.js/

ファイル読込

ダウンロードした「rainyday.js」を読み込みます。

<script type="text/javascript" src="js/rainyday"></script>

1	<script type="text/javascript" src="js/rainyday"></script>

HTML

HTMLは以下のように記入します。

<body onload="run();">
<img id="background" alt="background" src="" />
</body >

</body >

JS

下記で動きを指定しています。
こちらはrainyday.jsからダウンロードしたファイルのdemo2.htmlの動きと同じものです。

<script>
function run() {
    var image = document.getElementById('background');
    image.onload = function() {
        var engine = new RainyDay({
            image: this
        });
		engine.rain([ [3, 2, 2] ], 100);//ここを変更することで動きが変わる
    };
    image.crossOrigin = 'anonymous';
    image.src = 'img/hydrangea.jpg';//画像を指定
}
</script>