背景画像を横スクロール

赤字: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 1秒毎に呼び出し
}

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.〜」にスタイルを指定します。

戻る