[JS]リアルさが想像以上！ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js
Post on:2013年9月26日
sponsors
ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。
ぼっーと見てると、音まで聞こえてきそうです。
rainyday.js
rainyday.js -GitHub
デモは2つあります。
そのままにしておくと、雨の滴がどんどん増えてきます。
2つ目のデモは、雨の降り方が異なります。
雨はCanvasを使って再現しており、実装は下記のようになります。
<head>
...
<script src="rainyday.js" type="text/javascript"></script>
<script type="text/javascript">
function demo() {
var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
engine.rain([
engine.preset(0, 2, 500)
]);
engine.rain([
engine.preset(3, 3, 0.88),
engine.preset(5, 5, 0.9),
engine.preset(6, 2, 1),
], 100);
}
</script>
</head>
sponsors
