合体背景２■背景画像スライドの縦移動

●2017/07/23：即時関数で囲んで、グローバル変数を消しました。
『動く背景』と、背景画像スライドを合体しました。
背景画像はcssの background-repeat:repeat-y;指定で、左端一列指定になっています。
スライドさせず、縦流しするだけでも面白いです。
見本は色違いの背景画像なので、スライドさせることでGIFアニメの画像のように見えます。

前回掲載分はbodyの背景画像の左端指定でした。
しかしチラつき防止のためにbodyではなくdivで左端に領域を作って、その背景画像をスライドさせる方法に修正しました。
修正理由の詳細は、こちらから。
bodyの背景画像のように上に文章や画像が置けるように、divにCSSで z-indexのマイナス指定を付けます。

CSSで背景画像の最初の１枚目を指定していますが、指定しなくても動作します。
ただJavaScriptが動作しない場合に備えて、指定しておく方が安全。

■合体元JavaScriptはこちら→　背景移動６■左端移動　上へ＋背景スライド３■背景サイズ指定スライド

<!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"><!--
#bgD{
position:fixed; top:0; left:0;/*★必須。固定位置指定。左上指定。スクロールしても背景画像が切れないようにabsoluteではなくfixedを使用*/
z-index:-1;/*★必須。bodyの背景のように扱うため z-indexはマイナス指定。数値は調整可能*/
background:url(jugo3.jpg) repeat-y;/*★背景画像指定。縦に繰り返し。最初の１枚を記述。背景画像サイズは横250px縦208px*/
width:250px;/*★必須。横幅は背景画像の横サイズ*/
height:100%;/*★必須。縦幅一杯*/
}
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body>

<!--★コピーここから。下記１行が背景スライド位置指定。id="bgD"は必須-->
<div id="bgD"></div>

<img src="../mouse/ea1.gif" style="margin-top:50px;margin-left:200px;transform:rotate(45deg);"><!--★蝶の画像。見本のため削除-->
<br>
<img src="../mouse/ea2.gif" style="margin-left:180px;transform:rotate(-40deg);"><!--★蝶の画像。見本のため削除-->

<script type="text/javascript"><!--
/*===================================================================
スライドショーと左端背景移動の合体　★2017/07/23
背景移動参考：By  http://homepage2.nifty.com/toraneko/haikei/ugoku-haikei.html(とらねこ庵)
背景移動参考：By  http://ijichi.easter.ne.jp/java9/haikei3.htm(オリジナルJavaScript)
=====================================================================*/
(function (){var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["jugo3.jpg","jugo4.jpg","jugo5.jpg","jugo6.jpg"];
var myurl="";   //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分  
var spd=500;　  //★画像切替時間 1000=1秒

var mx=0;      //★右側へ移動する距離。マイナス数値で左側移動。0だと縦移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var my=-2;      //★下側へ移動する距離。マイナス数値で上側移動。0だと横移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var Bspd=50;   //★背景移動速度。この数値が小さいと速い

//指定ここまで------------------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}

/*★スライド指定*/
function chbg(){
/*■下記１行をdocument.body.style.backgroundImage="url("+myurl+ga[i%len]+")";とするとbody用背景になりますがチラつきます*/
bgD.style.backgroundImage="url("+myurl+ga[i%len]+")";
i++; setTimeout(chbg,spd);
}
/*★背景移動指定*/
var xp=0, yp=0, L, T; 
function bgGo(){ xp+=mx; yp+=my; L=xp+"px"; T=yp+"px"; bgD.style.backgroundPosition=L+" "+T; setTimeout(bgGo,Bspd); }
chbg(); bgGo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体背景２■背景画像スライドの縦移動 最終修正日 : 2017/07/23

　合体背景２■背景画像スライドの縦移動　　　　　最終修正日 : 2017/07/23