説明 ◆降る上る◆
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
雪が降ったりシャボン玉が上がったり、JavaScriptなら、画像（文字）を降らせることも上らせることも、コピペで簡単！
まず、『降る』といえば、雪！ そして春は桜、秋は紅葉。星降る夜も素敵です。
『上る』といえば、泡。風船。シャボン玉。タンポポの綿毛。好きなものを上げて下さい。
◆◇◆ このページに使っているのは、「画像のKurt Grigg・メニュー」の「大量の泡が上る」です ◆◇◆
なお、ドキュメント宣言が<!DOCTYPE html>では動かないモノにはHTML5が付いてます。
■花火のJavaScriptは、『ふわふわ』のコーナーにあります。
■◆ぱーぷりんの溜まり場◆の説明は、『ふわふわ』のコーナーにあります。
■画像(文字)の噴き出し(吹き出し)のJavaScriptは、『ふわふわ』のコーナーにあります。
■2016/05/31：「降る上るのメニュー分類」の「文字のSnow Fall」を「文字のSnowmaker」へ修正。
説明 ◆降る上るのメニュー分類◆
単純な落下から横揺れするものまで、「降る上る」については多くのJavaScriptがあり、様々な方が改造されています。大きく分けて文字使用と画像使用の２種類があります。●「文字使用」の代表として「
●「画像使用」では、代表的な「Altan」「Kurt Grigg」「ぱーぷりん」「OpenSpace」の４つと、それ以外の「画像が降る上る」にまとめました。
画像も文字も設定方法によって、次の４種類に分けてあります。
・A 画像(文字)を１種類使って、変化させず複数表示させるもの。
・B 画像(文字)を１種類使って、変化させながら複数表示させるもの。
・C 画像(文字)を複数使って、複数個別設定をして表示させるもの。
・D 画像(文字)を複数使って、設定はまとめてさせるもの。
説明 ◆文字のSnowmaker・メニュー◆
文字使用で一番多いのはなんといっても、雪です。最新のCSSで装飾することで変化も付けられます。代表的な
「Snowmaker」の作成者は「Peter Gehrig」と判明しました（2016/05/31：記）。
全件グローバル変数を削除済み：2016/06/03
| 雪が降る | ■文字B■ 色、数、大きさ、速度を設定可能の文字の雪の降るJavaScript。降る領域を選択できます。原本へのリンク有り。 |
| 透過の複数の星が降る | ■文字D■ 降る領域選択を削除しました。文字種類を複数指定、ランダム透過、text-shadow 指定を追加。 |
| 透過の複数のハートが上る | ■文字D■ 文字が逆に下から上に昇ります。文字種類を複数指定、ランダム透過、text-shadow 指定を追加。 |
| 枠中で透過の複数の星が降る | ■文字D■ 枠の中で、複数種類指定、ランダム透過、text-shadow 指定の文字が降ります。 |
| 枠中で透過の複数の泡が上る | ■文字D■ 枠の中で、複数種類指定、ランダム透過、text-shadow 指定の文字が上ります。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆文字のOpenSpace＋HIMAJIN・メニュー◆
OpenSpaceの画像使用の『雪が降る』を原本に、HIMAJINサイトで改造されたものです。画像使用が文字使用になり、キラキラの色変化があります。横揺れのないシンプルな動きなのでソースが短く、小さな領域で使用するのに便利です。
全件グローバル変数を削除済み：2016/06/28
| キラキラ星が降る | ■文字D■ 動きは横揺れ無しで単純。でも１つの文字が指定した色に変化するので、キラキラと光ります。文字種類、文字サイズ、透過、角度の複数指定が可能。 |
| キラキラ星が流れる４方向 | ■文字D■ 上記をさらに改造。文字が流れる方向を数字で選択できます。 1=上→下 2=下→上 3=左→右 4=右→左 の４方向です。 |
| キラキラ雨の範囲指定４方向 | ■文字D■ 上記のJavaScriptに範囲指定を追加。キラキラ光る雨が枠の中で降ります。枠の中に文章入り。 |
| キラキラ泡の範囲指定４方向 | ■文字D■ 上記と同じJavaScript。指定項目部分だけを雨用から泡用に変更して、キラキラの泡が上ります。文章入り。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆文字が降る上る・メニュー◆
上記で紹介した以外の、文字使用の雪です。文字フォントで表現するので限界はありますが、とてもきれいなものです。
| 粉雪が降る | ■文字A■ 細かな雪が横揺れしながら降るリアル仕様。アレンジはできません。 |
| 激しい粉雪 | ■文字B■ 横殴りの粉雪。マウスの動きで向きが変わり、底にちょっと積もります。アレンジ不可。 |
| 透過の雪が降る-Gizensha- | ■文字B■ １色指定なのに雪の透明度が違い、横揺れするリアルな雪です。『教えて！goo』でGizenshaさん回答のもの。 |
| 複数透過の花が降る-Gize… | ■文字D■ 上記を改造して文字種類と文字色を複数指定にしました。 |
| 透過の蛍が上る-Gizensha- | ■文字B■ 「透過の雪が降る -Gizensha-」を改造して、逆に下から上へ。 |
| 複数透過の泡が上る-Gize… | ■文字D■ 「透過の蛍が上る -Gizensha-」を改造して文字種類と文字色を複数指定にしました。 |
| 銀河（文字）-雛形倶楽部- | ■文字D■ 画像の「銀河（文字）-雛形倶楽部-」を改造して、複数文字が流れます。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆画像のAltan・メニュー◆
雪の画像を使ったJavaScriptの中で、たぶん一番有名なモノのひとつが、Altan(人名？サイト名？)のモノです。有名なので、いろいろに改造されてもいます。
１つを見つけると、また別の改造したモノを発見して、何度も何度もソースを書き替えています。
さすがAltan。たくさんの方が様々に改良されていて、参考になります。
全件グローバル変数を削除済み：2016/06/04
| 雪が降る -原本- | ■画像A■ 上記で説明した Altan の「雪が降る」の原本です。HTML5でも動作します。画像は１種類のみです。原本なので、グローバル変数は消してません。 |
| 複数種類の透過の雪が降る | ■画像D■ 古いブラウザ対応分を削除し、複数種類の画像使用、ランダムの透過指定と画像サイズ比率指定の雪が降ります。 |
| 複数透過サイズと角度変化降る | ■画像D■ 上記にさらに、「サイズ変化指定」と「角度（回転）指定」を追加しました。 |
| ランダムで１種類変化降る | ■画像D■ 上記のJavaScriptのソースを少し変え、ページを開くたびに降る雪の画像種類がランダムに変化します。 |
| 複数種類の透過の画像が上る | ■画像D■ 下から上へ、複数種類のランダムの透過指定付きの画像が上ります。 |
| 複数透過サイズと角度変化上る | ■画像D■ 下から上へ、の上記にさらに、「サイズ変化指定」と「角度（回転）指定」を追加しました。 |
| 枠の中で雪が降る | ■画像D■ 「複数種類の透過の雪が降る」のJavaScriptを、範囲指定できるよう改造。枠の中のツリーの上に雪が降ります。 |
| 枠の中でサイズと角度変化降る | ■画像D■ 「複数の透過のサイズと角度変化降る」のJavaScriptを、範囲指定できるよう改造。枠の中の桜の木から桜の花びらが散ります。 |
| 枠の中で画像が上る | ■画像D■ 「複数種類の透過の画像が上る」のJavaScriptを、範囲指定できるよう改造。枠の中でシャボン玉が上ります。 |
| 枠の中でサイズと角度変化上る | ■画像D■ 「複数の透過のサイズと角度変化上る」のJavaScriptを、範囲指定できるよう改造。泡と星が上ります。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆画像のKurt Grigg・メニュー◆
「Kurt Grigg」名義のJavaScriptは大量にあります。その範囲は「降る上る」だけではありません。ソースの中に名義がなくても、その構造上、原本は「Kurt Grigg」ではないかと思えるモノも存在します。
残念ながら最新ブラウザでは動作しないJavaScriptもありますが、なんとか復活させたいと思ってます。
全件グローバル変数を削除済み：2016/03/07
| 激しい泡が上る | ■画像B■ 激しい泡が勢いよく吹き上がります。原本はブラウザIE(とNS)専用を、最新ブラウザ対応、HTML5対応に改造。画像が大小に変化し、残像で透明に見えます。原本リンク有り。 |
| 大量の泡が上る | ■画像D■ 上記の「激しい泡が上る」の速度指定と泡表示数を変更。さらに複数画像指定とランダム透過指定を追加して、カラフルな泡が次々に上っていきます。 |
| 花吹雪 | ■画像D■ 上記の「大量の泡が上る」動きを、逆に改造。上から下へ画像が勢いよく舞い散ります。 |
| 落ち葉が散る | ■画像D■ 複数画像が降るKurt Griggの有名なJavaScript。HTML5対応にして、旧ブラウザ対応分を削除。何秒後に動作停止するか停止しないか可能。原本のリンク有り。 |
| ランダム透過のバラが降る | ■画像D■ 上記を改造して、降る画像にランダムの透過指定と画像サイズ比率指定を付けました。 |
| 透過の大小変化回転降る | ■画像D■ 上記をさらに改造して、降る画像に透過に加えて、ランダム指定の「大小サイズ変化指定」と「回転指定」を付けました。 |
| ランダム透過の綿毛が上る | ■画像D■ 「ランダム透過のバラが散る」を改造して、動きを逆にして、下から上へ画像が上ります。ランダムの透過指定と画像サイズ比率指定付き。 |
| 透過の大小変化回転上る | ■画像D■ 上記をさらに改造して、上る画像に透過に加えて、ランダム指定の「大小サイズ変化指定」と「回転指定」を付けました。「透過の大小変化回転降る」と逆の動きです。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆画像のぱーぷりん・メニュー◆
ぱーぷりんの溜まり場(京栄一級建築士事務所テンプレート)には多くのフリーのJavaScriptが置かれてます。そのままではブラウザIE11とHTML5では動作しませんが、少しの改造で動作するモノもあります。改造済みの「降る上る」を紹介します。
| 吹雪 -ぱーぷりん- | ■画像C■ 斜めに速い速度で降る吹雪です。 |
| 窓の中の吹雪 -ぱーぷりん- | ■画像C■ 上記の吹雪を、窓の中だけに降らせることができます。cssで位置指定して、好きな範囲で雪降りが可能。 |
| 風船 -ぱーぷりん- | ■画像C■ ゆっくりと空に上る風船です。 |
| 絵の中の全方向 -ぱーぷりん- | ■画像C■ 上下左右の四方向に同時に画像が浮遊します。範囲設定した絵の中で、大量に画像が散らばります。 |
| 海の中の全方向 -ぱーぷりん- | ■画像C■ 上記と同じソースで、詳細に範囲設定をして、楕円形の海の中を画像が泳ぎます。上下左右の四方向です。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆画像のOpenSpace・メニュー◆
OpenSpaceの画像使用の『雪が降る』を元に、私が改造しました。横揺れのないシンプルな動きなのでソースが短く、小さな領域で使用するのに便利です。
| 画像が降る | ■画像D■ 横揺れの無いシンプルな動作の『雪が降る』のJavaScriptを、複数種類画像、ランダム透過指定、HTML5対応へ改造。原本サイトへのリンク有り。 |
| 画像流れる４方向選択 | ■画像D■ 画像の流れを↓、↑、→、←の４方向から一つの選択指定へ改造。 |
| 画像流れる４方向(範囲) | ■画像D■ 上記をさらに範囲指定ができるように改造。 |
| 画像が流れる-同時４方向 | ■画像D■ 上記のJavaScriptをさらに改造して、画像が↓、↑、→、←の４方向に同時に流れます。 |
| 画像流れ-同時４方向(範囲指定) | ■画像D■ 上記同時４方向を、さらに範囲指定ができるように改造。 |
| 画像が流れる-同時２方向６種 | ■画像D■ 上記のJavaScriptをさらに改造して、画像が２方向に同時に流れます。方向の組み合わせ方法が６種類あります。 |
| 画像流れ-同時２方向６種(範囲) | ■画像D■ 上記同時２方向６種を、さらに範囲指定ができるように改造。 |
| 画像流れ-斜め４方向選択 | ■画像D■ 「画像が流れる-４方向選択」の流れる方向を、斜めにしました。左上から右下、右上から左下、左下から右上、右下から左上の方向の中から、数字設定で一つを選択できます。 |
| 画像流れ-斜め４方向選択(範囲) | ■画像D■ 上記をさらに範囲指定ができるように改造。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆画像が降る上る・メニュー◆
画像使用の、上記４つ以外のJavaScriptの紹介です。使用画像を変えるだけで、雪や桜や枯葉に変身しますが、単純な落下から横揺れするものまで、いろいろあります。
| 複数の花散る sna WORLD | ■画像D■ 複数画像の花散るJavaScriptです。降る画像が１種類の原本へのリンク有り。 |
| 複数の花散るサイズ指定 sna | ■画像D■ 上記を改造。上記の画像は実寸サイズですが、こちらは画像サイズを自由に変更できます。 |
| 複数の泡上る sna WORLD | ■画像D■ 「複数の花散る sna WORLD」をまた改造して、動きを逆にして、下から上に変更。 |
| 複数の泡上るサイズ指定 sna | ■画像D■ 上記を改造。上記の画像は実寸サイズですが、こちらは画像サイズを自由に変更できます。 |
| 銀河 -雛形倶楽部- | ■画像D■ 複数の画像がランダムに大小に変化して、川のように流れます。流れる向きや川の幅が変更可。 |
| サイズ実寸で流れる -雛形- | ■画像D■ 上記を改造。流れる画像のランダム大小変化を削除したので、画像実寸で流れます。 |
| 降る画像変化(四季と数字指定) | ■画像D■ 春夏秋冬にそれぞれ降る画像が自動的に変化。降り方も四季によって自動変化。別に、数字指定変化も作成。 |
| プレゼントサンタ(上→下) | ■画像D■ サンタが上から複数種類のプレゼントを落としながら、画面を往復するJavaScriptです。2015/06/08：不要な変数を削除。 |
| プレゼントサンタ(下→上) | ■画像D■ 原本は上記とは逆に、サンタが下から複数種類のプレゼントを上に投げながら画面を往復するJavaScriptですが、サンタを自動車に、プレゼントを風船に変更しました。 |
◇降る上るのメニュー分類法 ◆文字のSnowmaker・メニュー ◆文字のOpenSpace＋HIMAJIN・メニュー ◆文字が降る上る・メニュー ◆画像のAltan・メニュー ◆画像のKurt Grigg・メニュー ◆画像のぱーぷりん・メニュー ◆画像のOpenSpace・メニュー ◆画像が降る上る・メニュー ◇改造メモ
説明 ◆改造メモ◆
■富笑様からの指摘もあり、ちょこっと説明。(2014年7月27日現在 → 2015年4月30日修正 → 2015年6月9日 → 2016年3月7日修正)当サイトでは、ブラウザの古いバージョンでの対応はしません。そのためブラウザIE8以下では動作しない記述もあります。
でも古いJavaScriptのソースを最新ブラウザで動作させるために、あれこれ改造はします。
試行錯誤の結果、bodyのwidthとheightとtopとleftの値の指定は、
widthは window.innerWidth;
heightは window.innerHeight;
topは window.pageYOffset;
leftは window.pageXOffset;
と修正すれば、動作するようです。説明は、すたら日記から。
さらに縦に長いページの場合では、スクロールした下の部分も動作(雪等が降る)させるのかどうかで、HTML4とHTML5では記述が変わってきます。
どちらの記述を選択するかいろいろ悩んだのですが、「降る雪等」の位置指定を「position:absolute;」（絶対位置指定）から「position:fixed;」（固定位置指定）にすることにしました。
少しずつJavaScriptのソースを、この固定位置指定に修正していく予定です。