ぱーぷりん8-1■画像C■ 窓の中の吹雪 -ぱーぷりんの溜まり場-     UP日時 : 2014/06/14

ソースは『吹雪 -ぱーぷりんの溜まり場- 』と、全く同じです。
この『ぱーぷりんの溜まり場』のJavaScriptは、降る画像の範囲設定ができます。

範囲設定の数値はposition:absolute;での設定値となってます。
だから、背景画像やposition:absolute;指定の画像を画面に置いたら、その位置に雪画像が降るよう、入力事項のコーナーで範囲設定をすればいいのです。

上からの位置(top)、左からの位置(left)、範囲の横幅(width)、範囲の縦幅(height)は、
ugoku[0]=new Array(2, 0,0, 0,200, 100, 20, 10, "wb10.png");を例にとると、
()の中の、2番目、3番目、4番目、5番目の数値になります。
この4つの数字を全部 0 にすると、全画面に降ります。

例では、上端一列指定の背景画像に降るよう、設定した分です。
背景画像の縦幅が200pxあるので5番目の数値は200です。
2行目ugoku[1]=new Array(2, 0,0, 0,200, 50, 0, 10, "wb10.png");は、
範囲指定も画像も同じですが、降る速さや、揺れを変えています。
入力事項の説明を読めば、記述の方法がわかります。

3行目と4行目は、窓の中に降る雪の設定です。
窓の位置指定は、top:230px; left:100px; width:320px; height:240px; です。
だから同じ指定を雪画像にも指定すれば、窓の中に雪が降ります。
しかし!!

3行目のugoku[2]=new Array(2, 240,110, 300,220, 200, 0, 10, "wb10.png");
では、微妙に指定範囲が変わっています。
これは降る範囲を窓より小さめにして、窓枠から雪がはみ出さないようにしているからです。
手順としては、まず窓と同じ指定にしてから、きちんと範囲内に収まるよう、数値を調整すればいいと思います。
■注意!!■
スクロールが必要な縦長のページの時は、入力事項の
var srl = -1 ; // 画像を同時にスクロールさせるか? ( yes=1 , no=-1 )は、
『-1』設定にしないと、雪がスクロールするとともに、だんだん窓からズレていきます。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』