背景移動５■空と雲の３Ｄ移動

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

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

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

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

900px×675px空のpdq3asa.jpg

600px×450px空のgat125s.jpg

700px×450px空のpdq4asa.jpg

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景移動５■空と雲の３Ｄ移動</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{ background: url(pdq3asa.jpg) fixed;}/*★全面移動の背景画像指定(空)と背景画像位置固定*/

/*★#aka1は必須。部分移動の背景画像指定(空)。透過指定opacityは必須*/
#aka1{background: url(gat125s.jpg); z-index:-2;opacity:0.4;}

/*★#aka2は必須。部分移動の背景画像指定(空)。透過指定opacityは必須*/
#aka2{background: url(pdq4asa.jpg); z-index:-1;opacity:0.4;}

#aka1,#aka2{width:100%; height:100%; position:fixed; top:0; left:0;}/*★スクロールしても全画面に背景表示するための指定*/

--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。透過背景画像用の領域指定。id="aka●"必須-->
<div id="aka1"></div>
<div id="aka2"></div>

<img src="ira25.png" style="position:absolute;top:200px;left:0;right:0;margin:auto; width:180px;height:180px;"><!--★この１行は孫悟空の画像。不要なら削除-->

<script type="text/javascript"><!--
/*================================================================================ 
全画面背景移動の複数指定　★2019/01/27
参考：By  http://homepage2.nifty.com/toraneko/haikei/ugoku-haikei.html(とらねこ庵 サイト閉鎖済)
参考：By  http://ijichi.easter.ne.jp/java9/haikei3.htm(オリジナルJavaScript 新サイト)
=================================================================================*/
(function (){ var mx=[],my=[]; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var Bspd=100; //★移動速度。この数値が小さいと速い

/*■基本■mx[番号]=数値の、数値は右側移動、マイナス数値設定で左側移動、mx[番号]=0だと縦移動のみ。
          my[番号]=数値の、数値は下側移動、マイナス数値設定で上側移動、my[番号]=0だと横移動のみ。
★数値は自由に変更可。大きくすると速くなる。数値指定を変更して同じ移動方向にしても可*/

var mxx=5; var myy=0; //★全体移動用の指定。数値の変更で方向や速度を変更。見本は左から右
mx[1]=4; my[1]=2;     //★部分移動用の指定。数値の変更で方向や速度を変更。見本は左上から右下
mx[2]=4; my[2]=-1;    //★部分移動用の指定。数値の変更で方向や速度を変更。見本は左下から右上

var n=2;//★最大番号数。idの#akaや上記のmxやmyに付けた最大番号。連番ではなく途中の番号が抜けていても可

//指定ここまで----------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var xxp=0, yyp=0, xp=[], yp=[], L, T, i=1;
for(i=1;i<=n;i++){ xp[i]=0; yp[i]=0; } 
function bgGo() {
document.body.style.backgroundPosition=(xxp+=mxx)+"px"+" "+(yyp+=myy)+"px";//■全体移動用
   for(i=1;i<=n;i++){
   if (mx[i]===undefined) { continue; }//■抜けている番号は処理しない
   xp[i]+=mx[i]; yp[i]+=my[i]; L=xp[i]+"px"; T=yp[i]+"px";  
   $("aka"+i).style.backgroundPosition=L+" "+T;//■部分移動用
}
setTimeout(bgGo,Bspd);
}
bgGo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景移動５■空と雲の３Ｄ移動 最終修正日 : 2019/01/27

　背景移動５■空と雲の３Ｄ移動　　　　　最終修正日 : 2019/01/27