Kurt Grigg４■落ち葉が散る

●2016/03/07：即時関数で囲んで、グローバル変数を消しました。
「Autumn leaves（落ち葉が散る）」は「Kurt Grigg」の有名なJavaScriptのひとつです。
複数種類の画像が使用できることと、降る動きの横揺れが大きいことが特徴です。
そして原本には「何秒後に停止するか」という指定も付いています。

古いブラウザ対応分を削除し、HTML5でも動作可能に改造しました。
文章の上に画像が流れるか、文章の下に隠れるか（←この見本では隠れる）の指定も選択できます。
var stopafter=0;の 0 を数値にすると、その数値秒後に動作が停止します。（←この見本では0指定なので停止しない）
つまり var stopafter=30;にすると、30秒後に落ち葉が散らなくなります。

今回発見した原本はこちらから。
ただし原本から１行削除してHTML4で動作可能にしましたが、それをしても原本はHTML5では動作不可です。
そして原本では var stopafter=0;の「0指定は無効」です。

■2016/03/07：スクロール指定選択を削除して、position="fixed";（固定）で統一。
■2016/03/07：降る画像の最大横幅と縦幅を記述して、画像が降る領域の横幅、縦幅、top位置、left位置の指定を修正。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Kurt Grigg４■落ち葉が散る</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{ 
background:url(ko22.jpg) no-repeat #333;/*★背景画像指定。繰り返し無し。背景色は濃い灰色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦450px*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=========================================================================================
Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)*http://www.btinternet.com/~kurt.grigg/javascript/(Kurt's Free DHTML Javascript閉鎖)
JS保管サイト：http://www.chironoworks.com/kkhiro/index.html
★落ち葉が散る　旧ブラウザ対応削除とHTML5対応を追加。停止時間が0なら停止しない　2016/03/07
==========================================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var pics=["bu6s.png","bu7s.png","bu8.gif","bu9s.png","bu10.gif"];
var Zx=-1;           //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=20;          //★表示画像数(小サイズなら大量可)。Smoothness depends on image file size, the smaller the size the more you can use!
var imgw=28;         //★使用画像の最大実寸横幅 
var imgh=28;         //★使用画像の最大実寸縦幅
var spd=30;          //★原本20。数値が小さいほど速い
var stopafter=0;     //seconds! ★何秒後に停止するか。30秒後に停止なら30  停止しないなら 0 

var h=window.innerHeight+imgh, w=window.innerWidth+imgw;//■修正
var timer=null;
var y=[], x=[], s=[], s1=[], s2=[];
for (i=0; i < num; i++){
y[i]=Math.round(Math.random()*h); 
x[i]=Math.round(Math.random()*w); 
s[i]=Math.random()*5+3; s1[i]=0; s2[i]=Math.random()*0.1+0.05;
var randomleaf=pics[Math.floor(Math.random()*pics.length)];
document.write('<img src="'+randomleaf+'"id="leaf'+i+'" style="position:fixed; z-index:'+Zx+';">');
}
function fall(){
for (i=0; i<num; i++){
var sy=s[i]*Math.sin(90*Math.PI/180); var sx=s[i]*Math.cos(s1[i]); y[i]+=sy; x[i]+=sx;
if (y[i]>h){ y[i]=-60; x[i]=Math.round(Math.random()*w); s[i]=Math.random()*5+3;}
s1[i]+=s2[i];
document.getElementById("leaf"+i).style.left=-imgw+x[i]+"px";//■-imgw+追加
document.getElementById("leaf"+i).style.top=-imgh+y[i]+"px";//■-imgh+追加
}
timer=setTimeout(fall,spd);
}
function dsbl(){clearTimeout(timer); for(i=0;i<num;i++){document.getElementById("leaf"+i).style.visibility="hidden";}}
fall();
if(stopafter>0){setTimeout(dsbl,stopafter*1000)}
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

Kurt Grigg４■画像D■ 落ち葉が散る 最終修正日 : 2016/03/07

　Kurt Grigg４■画像D■　落ち葉が散る　　　　　最終修正日 : 2016/03/07