背景移動３■空の全面背景移動

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

星空の全面背景移動のJavaScriptです。
動いているのは背景画像なので、こんな風に上に文章が書けます。そして画像も置けます。船の画像はpngの背景透過画像です。
数値指定は mx=2;　my=1; で指定していますが、 mx=2;　my=0; に変更すると、「動く背景」の説明ページの青空ような真横移動になります。
今回は my=1; にして、斜め移動にしました。

CSS使用の全面背景移動はこちら　→　背景移動３-１■CSS空の全面背景移動
移動方向の数値の入れ方の参考はこちら　→　背景移動２■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>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background: url(hosisora2.jpg);}/*★背景画像指定*/
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<img src="gat_i1.png" style="position:absolute; top:200px; right:25%; width:250px; height:280px;"><!--★船の画像。不要なら削除-->

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

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

//指定ここまで----------------------------------------------------------------------------------
var xp=0, yp=0, L, T; 
function bgGo(){xp+=mx; yp+=my; L=xp+"px"; T=yp+"px"; document.body.style.backgroundPosition=L+" "+T; setTimeout(bgGo,Bspd);}
bgGo();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

背景移動３■空の全面背景移動 最終修正日 : 2019/01/20

　背景移動３■空の全面背景移動　　　　　最終修正日 : 2019/01/20