背景移動2■table背景移動・複数設定     最終修正日 : 2019/01/20


■2019/01/20:ソースを簡略化。
画像の上の「mx=0; my=2;」等の数値は、■背景移動1■box背景移動■等の移動方向の数値の入れ方の参考にして下さい。

上から下
mx[番号]=0; my[番号]=2;
左上から右下
mx[番号]=2; my[番号]=2;
下から上
mx[番号]=0; my[番号]=-2;
右上から左下
mx[番号]=-2; my[番号]=2;
左から右
mx[番号]=2; my[番号]=0;
左下から右上
mx[番号]=2; my[番号]=-2;
右から左
mx[番号]=-2; my[番号]=0;
右下から左上
mx[番号]=-2; my[番号=2;
●2019/01/20:即時関数で囲んで、グローバル変数を消しました。
JavaScriptを使用した背景移動です。
背景移動のJavaScriptついては、とらねこ庵(サイト閉鎖済)と オリジナルJavaScriptを参考に、2015/06/16より少しずつリニューアルします。

今回は複数指定の背景移動のJavaScriptです。
番号が同じものが、1個の領域分のセットになります。
たとえば、bodyに指定した「id="aka3"」の領域の背景移動は、JavaScriptのソースでは「mx[3]=▲とmy[3]=▲の番号指定行」が動作に対応しています。
「id="aka3"」の領域が不要なら、赤字部分の番号指定行を削除して下さい。

なお、「mx[番号]=▲とmy[番号]=▲の指定行」の▲の数値で、背景移動の方向と速度を設定しています。
この▲の数値は自由に変更してかまいません。
つまり、「上から下」の領域を、1個ではなく2個や3個にしてもいいのです。
ただし注意してほしいのは、「var mx[番号]=▲; var my[番号]=▲;」の数値を変更するという意味は、▲の数値を変更するという事です。mx[番号]の番号数字ではありません。
mx[番号]の[番号]は領域の場所を指定する番号です。[番号]は「id="aka"」の領域の番号と対応しています。
そしてCSSでは同じページで、同じidは使用不可能です。

だから「上から下」を3ヶ所指定するために、bodyの「id="aka2"」や「id="aka3"」の指定を「id="aka1"」に変更してはダメです。
CSSでは同じページで、同じidは使用不可能なのです。
その場合は、
var mx[2]=0; var my[2]=-2;
var mx[3]=2; var my[3]=0;
上記の2行を ↓↓ 下記に変更します。
var mx[2]=0; var my[2]=2;
var mx[3]=0; var my[3]=2;
これで「id="aka1"」と「id="aka2"」と「id="aka3"」の3ヶ所が「上から下」になります。