| 解 説 |
雪を降らせるにはdivタグを使ってレイヤーを一定方向に移動させます。スタイルシートで背景画像を表示するようにしておきます。また、画像の方に工夫する部分もあります。サンプルでは高さ（移動する方向）が120ピクセルで繰り返すような雪の画像を描いてあります。120ピクセル移動したら位置をリセットするという処理を行うことで延々と継ぎ目無く移動するように見えます。
|
| コード |
<![CDATA[
<html>
<head>
<title>雪を降らせる</title>
<style type="text/css"><!--
.bg { position:absolute;top:-120px;left:0px;width:640; height:1024; }
--></style>
<script langauge="JavaScript"><!--
count = 0;
imgHeight = 120; // 画像の縦幅
function snow()
{
snowLayer.style.pixelTop = -imgHeight +(count += 1) % imgHeight;
}
// --></script>
</head>
<body bgcolor="black" text="white" onLoad="setInterval('snow()',100)">
雪が降ります。
<div id="snowLayer" class="bg" style="background-image:url(snow.gif)"></div>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
雪を降らせる