Kurt Grigg８■透過の大小変化回転上る

●2016/03/07：即時関数で囲んで、グローバル変数を消しました。
Kurt Grigg７■画像D■ランダム透過の綿毛が上るをさらに改造し、「ランダム透過」に加えて、「ランダムに画像サイズの大小変化」を付けました。
それから、2016/03/07：「回転指定」を追加しました。

今回、画面下から上ってくる３種類の泡は全てほぼ縦横20pxのサイズで、同じ向きです。
それを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(fp25.png) repeat-y #8cd;}/*★女性の背景画像指定。縦繰り返し。背景色は水色*/
--></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=["w20.png","wb20.png","hi2.png"];
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]<-60){ y[i]=h+60; x[i]=Math.round(Math.random()*w); s[i]=Math.random()*5+3;}/*■y[i]指定を２ヶ所変更*/
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