こんにちは。
今回は窓に雨を降らせる事ができるJSライブラリ「rainyday.js」！です。
HTML5のcanvas機能を使用し、画像をぼかして雨水が滴るアニメーションを実装できるJSライブラリを紹介します。
窓に雨を降らせる事ができるJSライブラリ「rainyday.js」！
rainyday.js
「rainyday.js」をダウンロードしてみよう！
https://github.com/maroslaw/rainyday.jsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「rainyday.js」を設置してみよう！
先程ダウンロードしたrainyday.jsを/bodyの手前に読み込みます。
1 | <script type="text/javascript" src="js/rainyday.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> function run() { var image = document.getElementById('background'); image.onload = function() { var engine = new RainyDay({ image: this }); engine.rain([ [1, 2, 8000] ]); engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100); }; image.crossOrigin = 'anonymous'; image.src = '/img/rain.jpg'; } </script> |
html部分を記述します。
bodyタグのonloadを指定します。
1 2 | <body onload="run();"> <img id="background" src="img/rain.jpg" alt="background"> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
びっくりするぐらいリアルに表現されていますね。
以上で窓に雨を降らせる事ができるJSライブラリ「rainyday.js」！でした。
