雪(二重スクロール)

説  明
雪が上から下へゆっくりと降ります。雪の画像をレイヤー(DIVタグ)の背景画像として使用し、これを2枚重ねて異なる速度で移動させる事で奥行きを出しています。

注意事項
下記サンプルの赤字部分が画像の縦のピクセル幅、青文字が雪の落下幅(ピクセル単位)、紫文字が雪の落下速度(1秒=1000)、緑文字が雪の画像ファイル名、になっています。それぞれの状況に応じて書き換えてください。


動作雰囲気チェック >>実行
サンプル
<html>
<head>
<title>雪(2)</title>
<script language="JavaScript"><!--
dy_fg = 2; // 移動速度(手前)
iy_fg = 128; // 雪の画像の縦のピクセル幅(手前)
y_fg = -iy_fg; // 雪のY座標(手前)
dy_bg = 0.3; // 移動速度(奥)
iy_bg = 128; // 雪の画像の縦のピクセル幅(奥)
y_bg = -iy_bg; // 雪のY座標(奥)
function snowMove()
{
y_fg += dy_fg;
if (y_fg > 0) y_fg = -iy_fg;
snow_fg.style.pixelTop = y_fg;
y_bg += dy_bg;
if (y_bg > 0) y_bg = -iy_bg;
snow_bg.style.pixelTop = y_bg;
}
// --></script>
</head>
<body bgcolor="black" text="white" onLoad="setInterval('snowMove()',100)">
<div id="snow_bg" style="position:absolute;left:0px;top:-64px;width:200%;height:200%;background-image:url(snow_bg.gif);">
</div>
<div id="snow_fg" style="position:absolute;left:0px;top:-64px;width:200%;height:200%;background-image:url(snow_fg.gif);">
</div>
<div style="position:absolute;top:0px;left:0px;">
ゆっくりと雪が降ります。<br>
奥行きが感じられるように二重スクロールさせています。<br>
</div>
</body>
</html>