合体5■Up+Mv■ 動く背景に雪が降る     UP日時 : 2016/06/13

◆◆動くJavaScript◆◆

●2016/06/13:即時関数で囲んで、グローバル変数を消しました。
画面上端の範囲指定の中で、雪景色の背景画像が移動し、雪が降ります。
前回掲載分と似ていますが、ソースは修正してあります。

まず雪景色画像は、前回はbodyの背景画像で、表示は「repeat-x」の上端一列の横並び指定でした。
今回、雪景色画像はdivで作成した範囲(id="zon")の背景画像で表示は敷詰(何も指定しないと初期値は敷詰)です。
敷詰にすることで、背景画像の移動方向を自由に変更できます。
範囲(id="zon")の位置指定は「position指定」であるなら、「relativeでもabsoluteでもfixedでも可」です。
今回は、「absolute」指定です。
範囲の位置指定については、お好みでCSSを変更して下さい。
なお、雪景色の背景画像の移動には、JavaScriptではなくCSSを使用しています。
CSSの移動方向の指定方法は、合体元の説明を参考にして下さい。


wbw10.png

wbw15.png

wb10.png

wb15.png
私の作成した
背景透過png。
右クリックで
どうぞ。

■合体元JavaScriptはこちら→ OpenSpace3■画像D■画像が流れる-4方向選択(範囲指定)背景移動1-1■CSSbox背景移動