Altan３■画像D■　複数の透過のサイズと角度変化降る

■2015/11/05：JavaScriptの「++i」と「i++」を「i++」で統一していましたが、意味が違うそうなので原本通りに修正。
■2015/11/05：選択制を止めて position="fixed";に統一。w と h の値を範囲指定に変更しやすいように修正。
■2015/12/12：JavaScriptのソースを２行削除。
■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>Altan３■画像D■　複数の透過のサイズと角度変化降る</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(mo9.gif) no-repeat #ffc;/*★背景画像指定。繰り返し無し。背景色薄黄色*/
background-position:center 150px;/*★横位置中央　縦位置上から150px*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=====================================================================================================
Altanの雪が降る　　　複数種類の画像指定と旧ブラウザ対応分削除。透過、サイズと角度変化指定。　★2016/05/09
 * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
 * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
 * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
======================================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var ga=["mo6.png","mo7.png","mo8.png"];
var Zx=-1;            //★文章の上に泡が流れるか？　上に流れる：1   下に隠れる：-1
var maxSize=40;       //★１番大きい降る画像の横幅サイズ。画像実寸ではなく表示したいサイズ
var minSize=15;       //★１番小さい降る画像の横幅サイズ。画像実寸ではなく表示したいサイズ
var rota=[-20,20,-45,90,180]; //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var num=20;           // snow number★画像表示数
var maxOp=1;          //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.7;       //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=10;           //smaller number moves the snow faster★原本10。降る速さ。数値が小さいほど速い
var hidesnowtime=0;   //★形成する雪はx秒の後に消える。原本0。10と指定すると10秒後に降るのが停止

var snowtimer=null;   //タイマ変数初期化
var i=0; 
var w=window.innerWidth+maxSize, h=window.innerHeight+maxSize;//■画像表示幅追加
var dx=[], xp=[], yp=[], am=[], stx=[], sty=[];
var opa=[],nsSize=[];//■追加
for (i = 0; i<num; ++i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*w;          // set position variables■原本(w-50)
yp[i] = Math.random()*h;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
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 randomGa=ga[Math.floor(Math.random()*ga.length)];//■追加
document.write('<img src='+randomGa+' id="dot'+i+'" style="transform: rotate('+rrd+'deg);">');
}
function Snow(){  
for (i=0; i<num; ++i) {           /* iterate for every dot*/
yp[i] +=sty[i];
if (yp[i] >h) {               /*■原本h-50*/
xp[i]=Math.random()*(w-am[i]);/*■原本w-am[i]-30*/
yp[i]=0;
}
dx[i] +=stx[i];
var ob=document.getElementById("dot"+i).style;
ob.top=-maxSize+yp[i]+"px";//■-maxSize+追加
ob.left=-maxSize+xp[i]+am[i]*Math.sin(dx[i])+"px";//■-maxSize+追加
ob.position="fixed"; ob.zIndex=Zx; ob.opacity=opa[i]; ob.width=nsSize[i]+"px";//■追加
}
snowtimer=setTimeout(Snow, spd);
}
function hidesnow(){
if (window.snowtimer){clearTimeout(snowtimer);}
for (i=0; i<num; i++){document.getElementById("dot"+i).style.visibility="hidden";}
}
Snow();
if (hidesnowtime>0){ setTimeout(hidesnow, hidesnowtime*1000)}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

Altan３■画像D■ 複数の透過のサイズと角度変化降る 最終修正日 : 2016/05/09

　Altan３■画像D■　複数の透過のサイズと角度変化降る　　　　最終修正日 : 2016/05/09