ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

jQueryプラグイン, アニメーション

窓ガラス越しに雨を降らせるリアルなアニメーション『rainyday.js』

窓ガラス越しに雨を降らせるリアルなアニメーション『rainyday.js』

『rainyday.js』は、まるでガラス越しの風景に雨が降ってきたかのようなエフェクトを出すJavaScriptです。HTML5のcanvas機能が使われています。

とてもリアルなので見入ってしまうほど。サンプルを作ってみました。

【サンプル】
窓ガラス越しに雨を降らせるアニメーション『rainyday.js』

・Internet Explorer 8 以降
・Firefox 23 以降
・Google Chrome 27 以降
・Safari 5.1
などのモダンブラウザで動きます。

この『rainyday.js』の使用方法は続きをご覧下さい。

【使用方法】
まずは、こちらのサイトからZIPファイルを一式ダウンロードしてきましょう。

最初は簡単に設置できると思っていましたが、うまく雨を降らせるまで手間取ったので、こうやったらうまくいったという風に説明します。

<head>部分にまずスタイルを記述します。

続いて「rainyday.js」を読み込ませて設定をします。とりあえずは、下のコードをコピペして使ってみて下さい。

続いて<body>部分を

という風に記述します。画像のパスは各自設定して下さい。

これでサーバーにファイルを一式アップロードして開いてみて下さい。

本家ではデモが4つ用意されていて、雨の降りかたが違っています。

デモはこちら [『rainyday.js』デモ]

自分で好きなデモのソースをのぞいてみて、使われている値を利用してみて雨の降らし方を変えてみても良いと思います。

最後にサンプルのソースを記述しておきます。どうぞご参考まで。

この記事と関連してると思われる記事:


1 コメント

  1. tom

    解説いただいたソースでで動作確認しようとしたのですが、動かないよう?でした。
    元ファイルのスクリプトそのままで確認すると動くようです。

Leave a Reply

Theme by Anders Norén