Kurt Grigg３■花吹雪

<!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(wa2.jpg) no-repeat #96cabd;/*★背景画像指定。繰り返し無し。背景色は薄緑色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦600px*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=========================================================================================
花吹雪：bubbles Script by kurt.grigg@virgin.net
JS保管サイト：http://www2.tky.3web.ne.jp/~ogura1/
★最新ブラウザ対応とHTML5対応を追加。位置指定を修正。画像複数指定、ランダム透過指定追加。上→下へ方向変更　2016/03/06
==========================================================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["tuto5.png","tuto6.png","tuto7.png"];
var Zx=-1;           //★文章の上に花が流れるか？　上に流れる：1   下に隠れる：-1
var maxImg=30;       //★花の最大横幅指定。画像の実寸とは無関係です。最小横幅は3px指定済み。原本の最大横幅指定25
var Amount=25;       //★原本10。表示画数。 
var spd=30;          //★原本10。小さいほど速い。速度が違うと残像数が変わり、見え方が違う
var maxOp=1;         //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.7;      //★透過の最小値。ランダム変化です。0.1から1の間で指定 。maxOpより同じか小さくする。

var Ypos=[],Xpos=[],Speed=[],rate=[],grow=[],Step=[],Cstep=[];
var opa=[];//■追加
var WinHeight=window.innerHeight, WinWidth=window.innerWidth-maxImg;
for (i=0; i<Amount; i++){
var randomGa=ga[Math.floor(Math.random()*ga.length)];//■追加
document.write('<img src="'+randomGa+'"id="si'+i+'" style="position:fixed; z-index:'+Zx+';">');
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= 10+Math.random()*5;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
grow[i]=10;
rate[i]=Math.random()*0.5+0.1;
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//■追加
}
function bubbles(){
for (i=0; i<Amount; i++){
var sy=Speed[i]*Math.sin(270*Math.PI/180);
var sx=Speed[i]*Math.cos(Cstep[i]);

Ypos[i]-=sy; Xpos[i]-=sx;/*■方向の変更ここから*/
if (Ypos[i]>WinHeight+50){　　
Ypos[i]=-50;/■方向の変更ここまで*/

Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=10+Math.random()*5; grow[i]=3;
}
var layer=document.getElementById("si"+i).style;
layer.left=Xpos[i]+"px"; layer.top=Ypos[i]+"px"; 
layer.width=grow[i]+"px"; 
layer.height=grow[i]+"px";
layer.opacity=opa[i];//■追加
grow[i]+=rate[i]; Cstep[i]+=Step[i];
if (grow[i]>maxImg-1) grow[i]=maxImg;
}
setTimeout(bubbles,spd);
}
bubbles();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>
Kurt Grigg３■画像D■ 花吹雪 最終修正日 : 2016/03/06

　Kurt Grigg３■画像D■　花吹雪　　　　　最終修正日 : 2016/03/06
