背景画像を横スクロール

赤字: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>タグに背景画像として表示しています。

戻る