窓に雨を降らせる事ができるJSライブラリ「rainyday.js」!

2016/01/18

こんにちは。
今回は窓に雨を降らせる事ができるJSライブラリ「rainyday.js」!です。

HTML5のcanvas機能を使用し、画像をぼかして雨水が滴るアニメーションを実装できるJSライブラリを紹介します。

窓に雨を降らせる事ができるJSライブラリ「rainyday.js」!

rainyday.js

rainyday-js

 

「rainyday.js」をダウンロードしてみよう!

https://github.com/maroslaw/rainyday.jsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「rainyday.js」を設置してみよう!

先程ダウンロードしたrainyday.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
bodyタグのonloadを指定します。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。びっくりするぐらいリアルに表現されていますね。
以上で窓に雨を降らせる事ができるJSライブラリ「rainyday.js」!でした。

topへ戻る