SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [雪が降る]
Dynamic HTMLの参考書 Java Scriptの参考書

雪が降る

機能

よく見かける演出です。 雪が降るように画像を上からゆっくり落とす技です。 落ちる速度、揺れる速度、幅など詳細な設定が可能で、動き方はランダムになっているため、 自然な動きに近いものになっています。

ここでは雪の画像を使っていますが、紅葉や桜でも面白いでしょう。 ご自分で画像を作れば何でも応用が利きます。

類似サンプル

  1. 泡

利用方法

ヘッダにスクリプトを、本文にdiv要素にid属性を「iL0」「iL1」・・・のように連番でふって そのdiv要素内に画像を指定します。

雪の画像はスクリプトと一緒にダウンロードできます。ご自由にお使い下さい。 使う画像の種類は少ない方が読込時間が短く好ましいです。 画像の数は自由に設定できますので、同じ画像を何個も落としましょう。 その他にも下記のような項目の設定が可能です。

最大画像数
snow_num_max：最大画像数を指定します。 ただし、その数分だけdiv要素を指定する必要があります。 例えば、30を指定した場合、「iL0」から「iL29」までの３０個のdiv要素が必要です。 この時、属性値は必ず連番にして下さい。
横に揺れる速度
dx_spd：横揺れする速度を指定します。
縦に落ちる速度
dy_spd：落ちる速度を指定します。
横の揺れ最小幅
dx_wide_min：横揺れする幅の最小ピクセル数を指定します。 小さくすれば小刻みに動きます。 ただし、最大幅より小さくしておく必要があります。
横の揺れ最大幅
dx_wide_max：横揺れする幅の最大ピクセル数を指定します。 小さくすれば小刻みに動きます。 ただし、最小幅より大きくしておく必要があります。
ウインドウに対する横端のマージン
dx_margin：横揺れするとウインドウからはみ出て、一瞬スクロールバーが現れます。 ウインドウサイズを取得して計算をしていますが、余裕を取りたい場合、この数値を大きくして下さい。
処理速度
dt_act：全体の速度に影響します。 大きくすると遅くなります。

対応ブラウザ

IE4,IE5,NN4 (N6はエスケープしています)

サンプル

［サンプルを見る］ ［ダウンロード］

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>雪が降る</title>

<style type="text/css">
<!--
.img{
	position:		absolute;
	visibility:		hidden;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
var snow_num_max = 30;		// 最大画像数
var dx_spd = 1;				// 横に揺れる速度
var dy_spd = 2;				// 縦に落ちる速度
var dx_wide_min = 20;		// 横の揺れ最小幅
var dx_wide_max = 70;		// 横の揺れ最大幅
var dx_margin = 20;		// ウインドウに対する横端のマージン
var dt_act = 5;				// 処理速度

var scrX,scrY;
var dx = new Array();
var dy = new Array();
var sideTmg = new Array();
var sideFlag = new Array();

function Init(){
	scrX  = GetWindowSize("width");
	scrY  = GetWindowSize("height");
	for(i = 0; i < snow_num_max; i++){
		sideTmg[i] = 0;
		sideFlag[i] = true;
		z = dx_wide_max - dx_wide_min;
		dx[i] = Math.round(Math.random() * z + 0.5) + dx_wide_min;
		x = Math.round(Math.random() * scrX + 0.5) - dx_margin - dx_wide_max;
		x = Math.max(x,(dx_margin + dx_wide_max));
		y = Math.round(Math.random() * scrY + 0.5) - scrY;
		SetLayer("iL"+i,"x",x);
		SetLayer("iL"+i,"y",y);
		SetLayer("iL"+i,"v","visible");
		if(document.all){
			SetLayer("iL"+i,"v","visible");
		}else if(document.layers){
			SetLayer("iL"+i,"v","visible");
		}else if(document.getElementById){
			SetLayer("iL"+i,"v","hidden");
		}
	}
	XY();
}

function XY(){
	for(i = 0; i < snow_num_max; i++){
		// direction X
		if(sideFlag[i]){
			sideTmg[i] += dx_spd;
			if(sideTmg[i] >= dx[i]){
				sideFlag[i] = !sideFlag[i];
			}
		}else{
			sideTmg[i] -= dx_spd;
			if(sideTmg[i] <= -dx[i]){
				sideFlag[i] = !sideFlag[i];
			}
		}
		if(sideFlag[i]){
			x = GetLayer("iL"+i,"x") + dx_spd;
		}else{
			x = GetLayer("iL"+i,"x") - dx_spd;
		}
		SetLayer("iL"+i,"x",x);

		// direction Y
		y = GetLayer("iL"+i,"y") + Math.round(Math.random() * dy_spd + 0.5) - 1;
		if(y >= scrY){
			y = 0;
		}
		SetLayer("iL"+i,"y",y);
	}
	setTimeout("XY()",dt_act)
}

//ウインドウサイズ取得
function GetWindowSize(type){
	switch(type){
		case "width":
			if(document.all){
				return(document.body.clientWidth);
			}else if(document.layers){
				return(innerWidth);
			}else if(document.getElementById){
				return(window.innerWidth);
			}else{
				return(-1);
			}
		break;
		case "height":
			if(document.all){
				return(document.body.clientHeight);
			}else if(document.layers){
				return(innerHeight);
			}else if(document.getElementById){
				return(window.innerHeight);
			}else{
				return(-1);
			}
		break;
		default:
			return(-1);
		break;
	}
}

// レイヤーゲット
function GetLayer(lay,dir){
	if(document.all){
		if(dir == "x"){
			return(document.all(lay).style.posLeft);
		}else if(dir == "y"){
			return(document.all(lay).style.posTop);
		}else{
			return(-1);
		}
	}else if(document.layers){
		if(dir == "x"){
			return(document.layers[lay].left);
		}else if(dir == "y"){
			return(document.layers[lay].top);
		}else{
			return(-1);
		}
	}else if(document.getElementById){
		if(dir == "x"){
			return(parseInt(document.getElementById(lay).style.posLeft));
		}else if(dir == "y"){
			return(parseInt(document.getElementById(lay).style.posTop));
		}else{
			return(-1);
		}
	}
}

// レイヤーセット
function SetLayer(lay,dir,z){
	if(document.all){
		if(dir == "x"){
			document.all(lay).style.posLeft = z;
		}else if(dir == "y"){
			document.all(lay).style.posTop = z;
		}else if(dir == "v"){
			document.all(lay).style.visibility = z;
		}
	}else if(document.layers){
		if(dir == "x"){
			document.layers[lay].left = z;
		}else if(dir == "y"){
			document.layers[lay].top = z;
		}else if(dir == "v"){
			if(z == "visible"){
				z = "show";
			}else{
				z = "hidden";
			}
			document.layers[lay].visibility = z;
		}
	}else if(document.getElementById){
		if(dir == "x"){
			document.getElementById(lay).style.posLeft = z;
		}else if(dir == "y"){
			document.getElementById(lay).style.posTop = z;
		}else if(dir == "v"){
			document.getElementById(lay).style.visibility = z;
		}
	}
}

// -->
</script>
</head>

<body onload="Init()">

<div class="img" id="iL0"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL1"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL2"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL3"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL4"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL5"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL6"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL7"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL8"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL9"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL10"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL11"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL12"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL13"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL14"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL15"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL16"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL17"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL18"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL19"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL20"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL21"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL22"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL23"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL24"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL25"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL26"><img src="image/snow2.gif" alt=""></div>
<div class="img" id="iL27"><img src="image/snow0.gif" alt=""></div>
<div class="img" id="iL28"><img src="image/snow1.gif" alt=""></div>
<div class="img" id="iL29"><img src="image/snow2.gif" alt=""></div>

</body>

</html>
[Go To Top]
Last modified June,2002
Copyright(C)2001 T.Miyazaki , All Rights Reserved.