Kurt Grigg７■ランダム透過の綿毛が上る

●2016/03/07：即時関数で囲んで、グローバル変数を消しました。
Kurt Grigg５■画像D■ランダム透過のバラが降るをさらに改造し、複数画像のランダム透過の綿毛が上るJavaScriptにしました。
上から下向きだったのが、下から上向きの逆の動きです。
var stopafter=30; を入れると、30秒後に綿毛が上るのが停止します。見本は var stopafter=0; なので停止しません。

2016/03/07追加：さらに降る画像サイズ指定に、transform: scale()を付加しました。
これは使用する複数種類の画像サイズが全体的に少し大きめか小さめで、さらに複数種類の画像が同じサイズで無い時に利用すると便利です。
見本ではJavaScriptのソースの中で、「var Sca=1.2;」の指定で、全部の画像サイズを実寸サイズの120%表示にしています。
「var Sca=0.5;」なら50%、「var Sca=0.7;」なら70%、「var Sca=1;」で実寸サイズになります。
たとえば実寸が、横100px縦200pxの画像は「var Sca=0.5;」指定で横50px縦100pxで表示されます。
実寸とあまりにも違いすぎる拡大縮小はおすすめしませんが、ちょっとしたサイズ修正に便利です。
transform: scale()の解説は、HTMLクイックリファレンスから。

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

<!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(wa3.jpg) no-repeat #d0e191;/*★背景画像指定。繰り返し無し。背景色は黄緑色*/
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/03/07
==========================================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var pics=["bu11.gif","bu12.gif","bu13.gif","tan2.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 imgw=30;        //★使用画像の最大実寸横幅 
var imgh=51;        //★使用画像の最大実寸縦幅
var Sca=1.2;        //★使用画像の表示比率。小さい画像なので縦横120%表示指定。大きくも小さくも可。原寸大表示の時はvar Sca=1;で
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+imgh*Sca, w=window.innerWidth+imgw*Sca;//■修正
var timer=null;
var y=[], x=[], s=[], s1=[], s2=[];
var opa=[];//■追加
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;//■追加
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]+';transform:scale('+Sca+');">';//■追加
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=-imgw*Sca+x[i]+"px";//■-imgw*Sca+追加
document.getElementById("leaf"+i).style.top=-imgh*Sca+y[i]+"px";//■-imgh*Sca+追加
}
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