[JS]リアルさが想像以上！ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js

サイト構築 -JavaScript

Post on:2013年9月26日

sponsorsr

ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。

ぼっーと見てると、音まで聞こえてきそうです。

rainyday.js
rainyday.js -GitHub

デモは2つあります。

Demo 1

そのままにしておくと、雨の滴がどんどん増えてきます。

Demo 1

2つ目のデモは、雨の降り方が異なります。

Demo 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>