関数部
animeInit() で初期設定を行います。elms で frame div 内部の div を参照します。elms[0] で、最初の IMG
タグの画像を参照できます。frameWDHとframeHGTは背景のサイズです。star は流星の種類でこれが ０〜２ のとき、fall()
で星を流します。
function animeInit(){
var frame = document.getElementById("frame");//親フレーム
elms = frame.getElementsByTagName("div");
frameWDH = 660;//ここは手動設定
frameHGT = 240;
interval = Math.floor(16 * Math.random());//最初の待ち時間
star = -1;
fall();//流星表示
}
fall() では50m秒の間隔でタイマー処理を行います。星の移動間隔はこの間隔で定まります。流星が枠から外に出たら、interval を設定しこれが正の間は次の流星を作成しません。star
が -1 で intervalが0になると、流す星の種類（star）と速度係数（speed）を乱数でさだめます。星の移動距離はgo[star]でさだめます。流星の画像と方向を一致させるためです。また、alpha値を流星のy座標で変化させます。下に落ちると透明度があがり流星に色が薄くなります。この効果は現在のところ
IE６ のみで有効です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>星降る夜のアニメーション</TITLE>
<STYLE type="text/css">
<!--
#frame{
background-image : url(nightsky.gif);
background-repeat : repeat-x;
width : 660px;
height : 240px;
position : relative;
top : 0px;
left : 0px;
overflow : hidden;
}
.star{
width : 32px;
height : 32px;
top : -100px;
left : -100px;
position : absolute;
z-index : 1;
}
-->
</STYLE>
<script type="text/javascript">
<!--
var go = new Array(new Array(2,2),new Array(2,1),new Array(1,2));//落下のベクトル、画像と合わせること
var elms;//星画像のオブジェクト
var speed;//速度
var frameWDH,frameHGT;//親フレームの幅と高さ
var star,interval;
function animeInit(){
var frame = document.getElementById("frame");//親フレーム
elms = frame.getElementsByTagName("div");
// alert("star : " + elms.length);
frameWDH = 660;//ここは手動設定
frameHGT = 240;
interval = Math.floor(16 * Math.random());//最初の待ち時間
star = -1;
fall();//ここからタイマーループ
}//init
function fall(){
// alert("star : " + star);
if(star != -1){//流れている
var nx = elms[star].style.pixelLeft + go[star][0] * speed;//星の落下
var ny = elms[star].style.pixelTop + go[star][1] * speed;
var alpha = 96 - Math.floor(ny / frameHGT * 100);
elms[star].style.pixelLeft = nx;
elms[star].style.pixelTop = ny;
elms[star].style.filter = "Alpha(opacity=" + alpha + ")";//透明度設定（効果はIEのみ）
if((nx-30) > frameWDH || (ny-30) > frameHGT){
elms[star].style.filter = "Alpha(opacity=100)";//透明度リセット
interval = 30 + Math.floor(30 * Math.random());//この待ち時間で流星の頻度が変化
star = -1;
}
}
else{//流れていない
if(interval > 0){//待ち時間
interval--;
}
else{//流星をつくる
star = Math.floor(3 * Math.random());
if(star < elms.length){//念のため
speed = 7 + Math.floor(3 * Math.random());//落下速度
elms[star].style.pixelLeft = 20 + Math.floor((frameWDH) / 2 * Math.random());//初期位置
elms[star].style.pixelTop = -10;
}
}
}
setTimeout("fall()",50);
}//fall
//-->
</script>
</HEAD>
<BODY onload="animeInit();">
<H1>星降る夜のアニメーション</H1>
<div id="frame">
<IMG src="forground.gif" width="420" height="180" border="0" style="position : absolute;top : 64px;left : 0px;z-index : 2;">
<div class="star"><IMG src="starA.gif" width="32" height="32" border="0"></div>
<div class="star"><IMG src="starB.gif" width="32" height="32" border="0"></div>
<div class="star"><IMG src="starC.gif" width="32" height="32" border="0"></div>
</div>
<P>流れ星をJavaScriptで表現しました。前景は山になっていますが、透過GIFであればなんでもOKです</P>
<P>filterプロパティを使って落下するにつれ星が消えていくようにしてありますが、この効果を楽しめるのはIEのみです。</P>
</BODY>
</HTML>