| 解 説 |
画像を重ねて多重スクロール（奥行き感を出す）にはdivタグを使ってレイヤーを一定方向に移動させます。この時にレイヤーごとに移動速度を変えることで奥行き感がでます。ただし、スクリプトだけでなく画像の方に工夫する部分もあります。サンプルでは高さ（移動する方向）が256ピクセルで繰り返すようなパターン画像を描いてあります。256ピクセル移動したら位置をリセットするという処理を行うことで延々と継ぎ目無く移動するように見せています。
|
| コード |
<![CDATA[
<html>
<head>
<title>画像を重ねて多重スクロール（奥行き感を出す）</title>
<style type="text/css"><!--
.bg { position:absolute;top:-256px;left:0px;width:800; height:1024; }
--></style>
<script langauge="JavaScript"><!--
count0 = count1 = count2 = 0;
imgHeight = 256; // 画像の縦幅
function scrollImage()
{
lay0.style.pixelTop = -imgHeight +(count0 += 1) % imgHeight;
lay1.style.pixelTop = -imgHeight +(count1 += 2) % imgHeight;
lay2.style.pixelTop = -imgHeight +(count2 += 4) % imgHeight;
}
// --></script>
</head>
<body bgcolor="black" onLoad="setInterval('scrollImage()',100)">
<div id="lay0" class="bg" style="background-image:url(star2.gif)"></div>
<div id="lay1" class="bg" style="background-image:url(star1.gif)"></div>
<div id="lay2" class="bg" style="background-image:url(star0.gif)"></div>
<img src="title.gif" style="position:absolute;left:100px;top:50px;">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
画像を重ねて多重スクロール（奥行き感を出す）