窓ガラスにつく水滴をいろいろ変化させられるので、少し強めの雨だったり、まるで降り始めたばかりのような雨の情景だったりが表現できます。
『rainyday.js』
こちらはDemo画像。
4種類のデモが用意されています。
デモはこちらから『rainyday.js』demo
『rainyday.js』の対応ブラウザ
『rainyday.js』は、HTML5の機能を利用しています。 なのでモダンブラウザ以外は対象外になってしまいます。
- Internet Explorer 8 以上
- Firefox 23 以上
- Safari 5.1
- Google Chrome 27 以上
- Opera 11.60
- Android 4
もう少しありますが、長くなるので割愛します。 詳細はデモページに記載してあります。
『rainyday.js』の使い方
ヘッダー内に『rainyday.js』を読み込んで、オプションを設定。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="rainyday.js"></script> <script> function run() { var engine = new RainyDay({ element: 'background', blur: 10, opacity: 1, fps: 30 }); engine.rain([ [0, 2, 200], [3, 3, 1] ], 100); } </script> |
実際にデモを見ていただくとわかるのですが、本当に雨が降っている様子を見ているかのようです。
Gifで作られたものなのかと思うぐらい。 実際に試してはいないのですが、要素指定ができるので背景だけというわけでもなさそう。
