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：全体の速度に影響します。 大きくすると遅くなります。
画面上での処理方法
TYPE：画像が画面の上に辿り着いたときの処理方法を変更できます。 「1」にすると画面上で停止して、天井に張り付いたように、 「2」にすると再度下から上がっていき、無限にループします。 お好みの演出を選んで下さい。

対応ブラウザ

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 = 2;				// 横に揺れる速度
var dy_spd = 2;				// 縦にあがる速度
var dx_wide_min = 20;		// 横の揺れ最小幅
var dx_wide_max = 50;		// 横の揺れ最大幅
var dx_margin = 20;		// ウインドウに対する横端のマージン
var dt_act = 4;				// 処理速度
var TYPE = 2;				// 画面上に達したときの処置:1=上に止まる,2=下から繰り返す

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 <= 0){
			switch(TYPE){
				case 1:
					y = 0;
					break;
				case 2:
					y = Math.round(Math.random() * scrY + 0.5) + scrY;
					break;
				default:
					break;
			}
		}
		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/awa0.png" alt=""></div>
<div class="img" id="iL1"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL2"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL3"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL4"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL5"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL6"><img src="image/awa0.png" alt=""></div>
<div class="img" id="iL7"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL8"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL9"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL10"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL11"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL12"><img src="image/awa0.png" alt=""></div>
<div class="img" id="iL13"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL14"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL15"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL16"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL17"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL18"><img src="image/awa0.png" alt=""></div>
<div class="img" id="iL19"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL20"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL21"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL22"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL23"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL24"><img src="image/awa0.png" alt=""></div>
<div class="img" id="iL25"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL26"><img src="image/awa2.png" alt=""></div>
<div class="img" id="iL27"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL28"><img src="image/awa1.png" alt=""></div>
<div class="img" id="iL29"><img src="image/awa2.png" alt=""></div>

</body>

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