『rainyday.js』は、まるでガラス越しの風景に雨が降ってきたかのようなエフェクトを出すJavaScriptです。HTML5のcanvas機能が使われています。
とてもリアルなので見入ってしまうほど。サンプルを作ってみました。
【サンプル】
窓ガラス越しに雨を降らせるアニメーション『rainyday.js』
・Internet Explorer 8 以降
・Firefox 23 以降
・Google Chrome 27 以降
・Safari 5.1
などのモダンブラウザで動きます。
この『rainyday.js』の使用方法は続きをご覧下さい。
【使用方法】
まずは、こちらのサイトからZIPファイルを一式ダウンロードしてきましょう。
最初は簡単に設置できると思っていましたが、うまく雨を降らせるまで手間取ったので、こうやったらうまくいったという風に説明します。
＜head＞部分にまずスタイルを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style media="screen"> body { overflow: hidden; } #parent { width: 100%; height: 100%; margin: 0 auto; position: absolute; top: 0; left: 0; } #parent img { width: 100%; } </style> |
続いて「rainyday.js」を読み込ませて設定をします。とりあえずは、下のコードをコピペして使ってみて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="rainyday.js"></script> <script> function run() { var engine = new RainyDay({ element: 'background', blur: 10, opacity: 1, fps: 30 }); engine.trail = engine.TRAIL_SMUDGE; engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 9; engine.rain([ [0, 2, 200], [3, 3, 1] ], 100); } </script> |
続いて＜body＞部分を
|
1 2 3 4 5 6 7 8 |
<body onload="run();"> <div id="sound" style="z-index: -1;"></div> <div id="parent"> <img id="background" src="ここに画像のパス" alt="代替文字" /> </div> </body> |
という風に記述します。画像のパスは各自設定して下さい。
これでサーバーにファイルを一式アップロードして開いてみて下さい。
本家ではデモが４つ用意されていて、雨の降りかたが違っています。
デモはこちら [『rainyday.js』デモ]
自分で好きなデモのソースをのぞいてみて、使われている値を利用してみて雨の降らし方を変えてみても良いと思います。
最後にサンプルのソースを記述しておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html> <head> <meta charset="utf-8"> <title>rainyday.js デモ ｜ ぱんにゃっと/H&Y</title> <style media="screen"> body { overflow: hidden; } #parent { width: 100%; height: 100%; margin: 0 auto; position: absolute; top: 0; left: 0; } #parent img { width: 100%; } </style> <script src="rainyday.js"></script> <script> function run() { var engine = new RainyDay({ element: 'background', blur: 10, opacity: 1, fps: 30 }); engine.trail = engine.TRAIL_SMUDGE; engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 9; engine.rain([ [0, 2, 200], [3, 3, 1] ], 100); } </script> </head> <body onload="run();"> <div id="sound" style="z-index: -1;"></div> <div id="parent"> <img id="background" src="img/test.jpg" alt="" /> </div> </body> </html> |
あわせてお読みください
jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください…
映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。 舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。…
テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。 テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すこと…
2015/02/09 at 3:29 PM
解説いただいたソースでで動作確認しようとしたのですが、動かないよう？でした。
元ファイルのスクリプトそのままで確認すると動くようです。