Kurt Grigg６■透過の大小変化回転降る

●2016/03/07：即時関数で囲んで、グローバル変数を消しました。
透過の付いた、さまざまのサイズと向きの複数画像が落ちてくるJavaScriptです。
Kurt Grigg４■画像D■落ち葉が散るを改造して、ランダム透過指定を付けたKurt Grigg５■画像D■ランダム透過のバラが降る。
それをさらに改造し、「ランダム透過」に加えて、「ランダムに画像サイズの大小変化」を付けました。
それから、2016/03/07：「回転指定」を追加しました。

今回、空から降ってくる４種類のクローバーは全て縦横30pxのサイズで、同じ向きです。
それを40px～10pxの大きさで、いろいろな向きで降るようにしました。
同じサイズの画像や同じ向きの画像しかない時に、これらの指定を付けることで変化を付けることができます。

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

<!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(kc2.jpg) no-repeat #fff1b1;/*★背景画像指定。繰り返し無し。背景色は薄いオレンジ色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦600px*/
}
--></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
★透過の大小変化回転降る　旧ブラウザ対応削除。透過、サイズ変化、回転指定付き。　2016/05/09 
==========================================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var pics=["bg1.gif","bg2.gif","bg3.gif","bg4.gif"];
var Zx=-1;           //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=30;          //★表示画像数(小サイズなら大量可)。Smoothness depends on image file size, the smaller the size the more you can use!
var maxSize=40;      //★１番大きい降る画像の横幅サイズ。画像実寸ではなく表示したいサイズ
var minSize=10;      //★１番小さい降る画像の横幅サイズ。画像実寸ではなく表示したいサイズ
var rota=[-20,20,-30,45,90]; //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var maxOp=1;         //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.4;      //★透過の最小値。ランダム変化です。0.1から1の間で指定 。maxOpより同じか小さくする。
var spd=50;          //★数値が小さいほど速い
var stopafter=0;     //seconds! ★何秒後に停止するか。30秒後に停止なら30  停止しないなら 0 

var h=window.innerHeight+maxSize, w=window.innerWidth+maxSize;//■修正
var timer=null;
var y=[], x=[], s=[], s1=[], s2=[];
var opa=[],nsSize=[];//■追加
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;
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//■追加
nsSize[i]=Math.floor(Math.random()*(maxSize-minSize)+minSize);//■追加
var rrd=rota[Math.floor(Math.random()*rota.length)];//■追加
var randomleaf=pics[Math.floor(Math.random()*pics.length)];
var sss='<img src="'+randomleaf+'"id="leaf'+i+'" style="position:fixed; z-index:'+Zx+';opacity:'+opa[i]+';width:'+nsSize[i]+'px;transform: rotate('+rrd+'deg);">';//■追加
document.write(sss);
}
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=-maxSize+x[i]+"px";//■-maxSize+追加
document.getElementById("leaf"+i).style.top=-maxSize+y[i]+"px";//■-maxSize+追加
}
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/05/09

　Kurt Grigg６■画像D■　透過の大小変化回転降る　　　　　最終修正日 : 2016/05/09