ふわふわ■花火３-２　連発花模様（div）kurt.grigg

●2016/05/25：原本自体が、即時関数で囲んでグローバル変数を消してあります。

■打上げ無しで連続で花火が開くJavaScriptはこちら→　花火３■連発花火（div）kurt.grigg

上記の花火のJavaScriptを、ほんの少し改造しました。
花火というよりも、花弁の透き通った花が連続で開いているように見えるJavaScriptです。
HTML5時は全てのブラウザで問題ありませんが、HTML4時にブラウザIE11で少し注意が必要。説明は原本の方に記述してあります。

基本が花火のJavaScriptなので、下記の４行の指定項目を太字のように変更すると、花火っぽくなります。

var ss=5; //★花火の光点の大きさ。単位px。光点は角丸指定（border-radius:50%;）で円形指定したdivの正方形なので、その縦横サイズ
var opa=1;//★花火が開いた後の光点の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var rs=30;//★原本30。速度。数値が小さいほど速い
var boxcss="";//★花火の光点の輪郭線の指定。CSSのbox-shadow指定での黒の輪郭線。不要なら var boxcss=""; で

もちろん花火として使用する時は、bodyの背景色は黒色指定して下さい。
■2016/05/25：前回掲載分は削除しました。

<!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>ふわふわ■花火３-２　連発花模様（div）kurt.grigg</title>

<!--★背景画像設定。不要なら削除。ここから-->
<style type="text/css"><!--
body{  /*★今回使用した背景画像は横幅478px高さ361pxです*/
background:url(fwa3.gif) no-repeat 400px 150px  #acf;/*★繰り返し無し。左から400px、上から150px。背景色水色*/
}
--></style>
<!--★背景画像設定。不要なら削除。ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=======================================================================
連発花模様＝連発花火（div）　Fireworks - http://www.btinternet.com/~kurt.grigg/javascript (閉鎖済)
掲載サイト：http://www.kurtsdhtml.talktalk.net/　★光点のサイズ、円形、透過、輪郭線指定。2016/05/25
===========================================================================*/
(function(){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★花火のスタート時の花火の単色の色指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var launchCol=['#ffa500','#0f0','#faf','#fff000','#fff'];

//★花火が開いた後に変化する光の種類。１個の光点が色変化します
var showerCol=["#f00","#0f0","#fff","#39f","#f0f","#fa0","#ff0"];

var ss =70;   //★原本1。花火の光点の大きさ。単位px。光点はdivの正方形なので、その縦横サイズ
var inZ=-1;   //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var opa=0.3;  //★花火が開いた後の光点の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var rs = 80;  //★原本30。花火が開く速度。数値が小さいほど速い
var n = 14;   //★原本14。光点の数
var boxcss="box-shadow: 0 0 0 1px #000;";//★花火の光点の輪郭線の指定。CSSのbox-shadow指定での黒の輪郭線。不要なら var boxcss=""; で

//指定ここまで----------------------------------------------------------------------------------------------------
var launchColour="#0f0";  //緑色。ページを開いた時の最初の花火の色
var y=200, x=200, xs=60;  //ページを開いた時の花火の表示縦位置、横位置。■花火の大きさ190を60へ小さく
var c1=0;                 //原本-1。旧スクリプトのcurrStep=0だったので0へ修正
var c2=5;
var h, w, t=null, f=[], o, e=360/n, idx=1,i=0;
for (i=0; i<n; i++){ if(document.getElementById(idx+i)){idx=(idx+=(n));}}
var sss='';
for (i=0; i<n; i++){
sss +='<div id='+(idx+i)+' style="position:absolute;top:-100px;left:-100px;height:'+ss+'px;width:'+ss+'px;background:'+launchColour+'; z-index:'+inZ+';border-radius:50%;opacity:'+opa+';'+boxcss+'"><\/div>';
}
document.write(sss);
function scrl(yx){ var y,x; y=window.pageYOffset; x=window.pageXOffset; return (yx===0)?y:x;}
function wndwsz(){ h=window.innerHeight-ss; w=window.innerWidth-ss; o=(w >= h)?h:w;}//-ss追加
function rst(){
c1=0;
launchColour=launchCol[Math.floor(Math.random() * launchCol.length)];
xs = Math.round(40+Math.random() * (o/10));//花火の開く大きさがランダムになる■小さめに修正
y=xs + Math.round(Math.random() * (h-(xs*2.2))) + scrl(0);
x=xs + Math.round(Math.random() * (w-(xs*2.2))) + scrl(1);
for (i=0; i<n; i++){ f[i].backgroundColor=launchColour; f[i].width=ss+"px"; f[i].height=ss+"px"; }
dsply();
}
function dsply(){
c1 +=c2; t=setTimeout(dsply,rs);
for (i=0; i<n; i++){
f[i].top=y+xs * Math.sin(i*e*Math.PI/180) * Math.sin(c1/100)+"px";
f[i].left=x+xs * Math.cos(i*e*Math.PI/180) * Math.sin(c1/100)+"px";
 if (c1>100){ f[i].backgroundColor=showerCol[Math.floor(Math.random()*showerCol.length)]; }//数行削除
}
if(c1>160){clearTimeout(t); rst();}
}
function init(){
wndwsz();
for (i=0; i<n; i++){ f[i]=document.getElementById(idx+i).style;}
var strt = Math.floor(500+Math.random()*2000);//速度ランダムで打ち上げる
setTimeout(dsply,strt);
}
init();
})();//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

花火３-２■連発花模様（div）kurt.grigg UP日時 : 2016/05/25

　花火３-２■連発花模様（div）kurt.grigg　　　　UP日時 : 2016/05/25