背景画像を横スクロール

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

実例

背景が横にスクロールします。

例文

<p id="scroll">テキスト</p>

<script type="text/javascript">

scrollBG();

//背景画像を横スクロール
function scrollBG() {
	document.getElementById("scroll").style.height = "100px"; //*1 表示の高さ
	document.getElementById("scroll").style.backgroundImage = "url(building.png)"; //*2 画像ファイル
	document.getElementById("scroll").style.backgroundRepeat = "repeat-x"; //*3 横に連続して表示
	
	count = 0; //カウントの初期値
	timerID = setInterval('scrollBG_countup()',500); //*4 0.5秒毎に呼び出し
}

function scrollBG_countup() {
	count++; //増分
	if (count > 99) count = 0; //カウントをリセット
	document.getElementById("scroll").style.backgroundPosition = count + "px 0px"; //表示位置を変更
}
</script>

解説

背景に指定した画像を横にスクロールさせます。
画像は横に連続して繋がるものを用意します。実例では町並みにしましたが、電車や飛行機など乗り物を動かしても良いですね。
テキストを表示する<p>タグの背景に設定していますので、テキストと干渉しません。<body>に設定することも可能です。
今回は、0.5秒毎に1pxずつ右に動かしています。

（*1）画像を表示する位置の高さを決めます。
（*2）背景に表示する画像のファイル名を指定します。
（*3）表示の繰り返しを指定します。「repeat-x」は横に連続、「repeat-y」だと縦に連続した背景になります。縦横の場合は「repeat」とします。
（*4）スクロールの速度を決めます。「500」の場合、0.5秒（500/1000秒）毎に1px分右に移動します。

<body>の背景に指定する場合は、「document.body.style.〜」にスタイルを指定します。

応用

画像を2枚重ねて、別々に動かします。

背景が横にスクロールします。

<div id="build02"><div id="build01">テキスト</div></div>

<script type="text/javascript">

scrollBG2();

//背景画像を横スクロール
function scrollBG2() {
	//手前の画像
	document.getElementById("build01").style.height = "100px"; //*1 表示の高さ
	document.getElementById("build01").style.backgroundImage = "url(building01.png)"; //*2 画像ファイル
	document.getElementById("build01").style.backgroundRepeat = "repeat-x"; //*3 横に連続して表示
	//奥の画像
	document.getElementById("build02").style.height = "100px"; //*1 表示の高さ
	document.getElementById("build02").style.backgroundImage = "url(building02.png)"; //*2 画像ファイル
	document.getElementById("build02").style.backgroundRepeat = "repeat-x"; //*3 横に連続して表示
	
	count = 0; //カウントの初期値
	timerID = setInterval('scrollBG2_countup()',500); //*4 0.5秒毎に呼び出し
}

function scrollBG2_countup() {
	count++; //増分
	if (count > 99) count = 0; //カウントをリセット
	document.getElementById("build01").style.backgroundPosition = (count * 2) + "px 0px"; //2倍の位置移動
	document.getElementById("build02").style.backgroundPosition = count + "px 0px"; //表示位置を変更
}
</script>

重ねた奥の画像（building02.png）に対して手前の画像（building01.png）が2倍速く移動しています。
画像は<img>タグを使用せず<div>タグに背景画像として表示しています。

戻る