背景移動4■全背景と部分の複数移動     最終修正日 : 2019/02/05

●2019/02/05:即時関数で囲んで、グローバル変数を消しました。
JavaScriptを使用した背景移動です。
背景移動のJavaScriptついては、とらねこ庵(サイト閉鎖済)と オリジナルJavaScriptを参考に、2015/06/16より少しずつリニューアルします。

mororecoの「CSSのみで星の輝く夜空を背景にする方法」という 2014年6月26日付けの記事で、CSSのアニメーション機能を使用した背景移動があります。
でも画像を使用するので、画像だけ参考にしてJavaScriptで作成してみました。

「星空(画像は jpg の静止画像で星は瞬かない)」の全面背景移動と、星を瞬かせるための「星を消す闇」画像の部分背景移動、「雲」画像のの部分背景移動の3種類の複数設定のJavaScriptです。とてもリアルな動きの星空になります。
複数設定の記述方法は、■背景移動2■table背景移動・複数設定■と、ほとんど同じです。
この見本を参考に部分移動の領域の個数を増加させることもできます。
気をつけるのは全面移動と、部分移動では、指定方法が違うという点です。
■背景移動3■空の全面背景移動■を見ていただくとわかりますが、
全面 → document.body.style.backgroundPosition=〜〜〜;
部分 → $("aka"+i).style.backgroundPosition=〜〜〜;
と記述が変わります。


900px×635px星空のpdq2.jpg

100px×100px背景色・透過の闇のyami.png

1000px×500px背景色・透過の雲のkumoTP.png
「星空」はパブリック・ドメイン(著作権無し)のフリー素材を加工して作成。「闇」と「雲」は「mororeco」を参考に私が作成しました。縮小表示しています。画像が必要な方は、右クリックでどうぞ

■2019/02/05:bodyの背景色指定追加と「;」もれ修正。