背景移動９　桜の３Ｄ移動

■2015/07/03：記述が下側になるほど重なり方が上になるので、z-index指定を削除。
■2015/07/03：position:absolute;の初期値はtop:0; left:0;なので、初期値と同じ分は削除。

divで作成した領域で、速度の違う２種類の背景画像を移動させることで、少し立体的に見える３Ｄの桜を作成しました。
今回は同一の桜の背景画像を使用して、上の背景画像に透過指定を入れて移動します。
ただし移動速度は違うのですが、向きが同じ上→下なので、時々画像がぴったり重なってしまいます。
それを防止するために、CSSで位置指定をid="aka1"とid="aka2"では左側（left:10px;）にズラしました。
その分、基準のid="aka1"からはみ出さないように、id="aka2"の横幅（width）を10px分だけ小さくしています。

今回の背景透過の少女の画像は移動しないので、JavaScriptとは無関係です。削除してもかまいません。
ただ画像の重ね方として、この少女の画像の基準位置もid="aka1"なので、位置指定をマイナス指定することで、id="aka1"の領域からはみ出して表示することができます。
重ね方次第で、いろいろと面白い表現ができるので参考にして下さい。

難しいのは領域（画像）の重ね方です。
領域の重ね方の方法の参考はAllAboutから。
コツがわかれば何枚でも重ねられます。
移動領域の増やし方、減らし方は、■背景移動２table背景移動・複数設定■の説明をご覧下さい。

全ソース：ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。

<!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>

<!--★ここからコピー。#aka1と#aka2は必須。#aka1が基準になる領域-->
<style type="text/css">
<!--
body{background:#eee;}/*★全体の背景色　薄灰色指定。お好みで*/

#aka1{
position: relative; margin:50px auto;/*★基準になる一番下の領域の位置指定。中央位置指定にしてますが、お好みで変更*/
width:300px; height:400px;/*★領域の横と縦のサイズ*/
background: url(fi12.gif);/*★１番下の背景画像指定。桜画像。サイズは横も縦も170px*/
box-shadow: 5px 5px 10px #777; /*★領域の影指定。灰色*/
border:ridge 10px #860;/*★枠指定 茶色*/
}

#aka2{
position:absolute;left:10px;/*★その上の領域の位置指定。柄をズラすためにleftだけ10px。ズラさないならleftは0*/
opacity:0.4;/*★透過指定。1で完全不透過になり下の背景画像が見えなくなる。お好みで*/
background: url(fi12.gif);/*★真ん中の背景画像指定。今回は#aka1と同じ桜画像*/
width:290px; height:400px;/*★領域の横と縦のサイズ。基本は#aka1と同サイズだが位置指定でleftを10px指定なので、#aka1よりwidthを10px減らす*/
}

/*★背景透過の少女の画像。不要なら削除*/
.girl{
position: absolute; bottom:-180px;/*★位置指定の基準は#aka1。bottomにマイナス指定なので、#aka1より画像が下にはみ出す*/
width:272px; height:400px;/*★少女の画像の横幅と縦幅*/
}

/*★タイトル文字指定。影付き。タイトルが一番上になります。不要なら削除*/
.test1{
position:absolute;/*★基本はこのままコピー。*/
width:300px;/*★文字領域の横のサイズ。基本は#aka1と同サイズ。*/
text-align:center;/*★文字の左右中央位置指定。上記のwidth指定が必須*/
color: #fff;/*★文字色　白色*/
font-size:30px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow:0 0 20px #f00;/*★文字の影指定。赤色のボカシ*/
}
-->
</style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。移動領域の指定。id="aka1"とid="aka2"必須。下側に記述した要素が１番上に重ねられます-->
<div id="aka1">
<div id="aka2"></div>
<img src="qu9.gif" class="girl"><!--★←この１行が少女の画像指定。画像ファイル名記述。不要ならこの１行は削除-->
<p class="test1">動くJavaScript</p><!--★←この１行がタイトル文字指定。不要ならこの１行は削除-->
</div><!--★←ここが領域の基準になるid="aka1"の終了タグになります-->

<script type="text/javascript"><!--
/*================================================================================ 
部分背景移動の複数指定　★2015/07/02
参考：By  http://homepage2.nifty.com/toraneko/haikei/ugoku-haikei.html(とらねこ庵)
参考：By  http://jun88.6.ql.bz/java9/haikei3.htm(オリジナルJavaScript)
=================================================================================*/
var Bspd=100; //★移動速度。この数値が小さいと速い
/*■基本■mxの数値は右側移動、マイナス値設定で左側移動、mx=0だと縦移動のみ。myの数値は下側移動、マイナス値設定で上側移動、my=0だと横移動のみ。*/
var mx1=0; var my1=1;   //★部分移動用の指定。数値の変更で方向や速度を変更できる。見本は上から下。数値が小さい方が速度が遅い
var mx2=0; var my2=3;   //★部分移動用の指定。数値の変更で方向や速度を変更できる。見本は上から下。数値が大きい方が速度が速い
var xp1=0,yp1=0;
var xp2=0,yp2=0;
function bgGo() {
aka1.style.backgroundPosition=(xp1+=mx1)+"px"+" "+(yp1+=my1)+"px";       //■部分移動用
aka2.style.backgroundPosition=(xp2+=mx2)+"px"+" "+(yp2+=my2)+"px";       //■部分移動用
setTimeout("bgGo()",Bspd);
}
window.onload=bgGo;
// --></script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

背景移動９ 桜の３Ｄ移動 最終修正日 : 2015/07/03

　背景移動９　桜の３Ｄ移動　　　　　最終修正日 : 2015/07/03