雨が降っているような表現ができるライブラリ「rainyday.js」を使ってみます。
使い方
下記からダウンロードできます。
GitHub – maroslaw/rainyday.js: Simulating raindrops falling on a window
ダウンロード後、rainyday.jsを読み込みます。
1 | <script src="rainyday.js"></script> |
HTML
1 2 3 | <div id="wrapper"> <img src="" width="960" id="photo"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var photo = document.getElementById('photo');// 画像読み込み後の処理photo.onload = function() { // rainyday.jsの設定 var engine = new RainyDay({ image: photo // 雨を降らせる画像の指定 }); // 雨粒の設定 engine.rain([ [3, 3, 1] // サイズが3～6の雨粒を1滴追加する ], 100); // 0.1秒ごとに雨粒追加を実行};// 画像のsrcを指定photo.src = 'img.jpg'; |
オプション・メソッド
How to useに記載されているものからいくつか試してみます。
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var photo = document.getElementById('photo');var wrapper = document.getElementById('wrapper');photo.onload = function() { var engine = new RainyDay({ image: photo, parentElement: wrapper, blur: 12, opacity: 0.7 }); // 雨粒の設定 engine.rain([ [1, 2, 8000] ], 500); engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);};photo.src = 'img.jpg'; |
| image | 雨を降らせる画像の指定。必須。 |
|---|---|
| parentElement | canvasの親要素を指定。デフォルトはbody。 |
| blur | 雨によるぼかしの量を指定。デフォルトは10。 |
| opacity | 雨粒の不透明度の指定。デフォルトは1。 |
| rain([[min, range, count], … ], ms); | 雨粒の指定。 msミリ秒ごとに、min～(min+range)の範囲のサイズで、countの数だけ雨粒が追加される。 |
【参考サイト】
コメントが承認されるまで時間がかかります。