背景移動5■空と雲の3D移動     最終修正日 : 2019/01/27

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

以前の「空の3D移動」を「空と雲の3D移動」に修正しました。
全画面で、速度の違う3種類の空の背景画像を移動させることで、立体的な3Dの空と雲を作成するJavaScriptです。
速度や移動方向が違うだけで、JavaScriptのソースは■背景移動4■全背景と部分の複数移動■と同じです。
違うのは、3種類の空の背景画像のうち、2枚の空の画像にCSSで透過指定(見本はopacity:0.4)を付けていることです。

スクロールすることも考えて、bodyとdivに固定位置指定を入れています。
それから3枚の空の背景画像を重ねるために、「z-index:数値;」を使用しています。
指定無しの初期値は「z-index:0;」です。数値が大きい方が上側、数値が小さい方が下側になります。
id="aka1"に「z-index:-2;」とマイナス指定を入れているのは、背景を文章や画像の下側にするためです。
そしてbodyに「z-index:数値;」が入ってないのは、bodyの背景画像は必ず1番下になるからです。
たとえid="aka1"に「z-index:-1000;」と記述しても、bodyの背景画像より下側になることはありません。

3枚の空の背景画像を重ねて立体感を出すために、body指定の空の背景以外の2枚の空の背景画像には、透過指定を付けます。
3枚の画像の順番(z-index)や、透過(opacity)の数値はCSSで指定し、背景移動の速度や方向はJavaScriptで指定します。
指定を変更すると、また違った動きになります。


900px×675px空のpdq3asa.jpg

600px×450px空のgat125s.jpg

700px×450px空のpdq4asa.jpg
3枚の「空」の画像はパブリック・ドメイン(著作権無し)のフリー素材をシームレス(継ぎ目無し)加工して作成。縮小表示しています。画像が必要な方は、右クリックでどうぞ