ふわふわ■花火３　連発花火（div）kurt.grigg

●2016/05/25：原本自体が、即時関数で囲んでグローバル変数を消してあります。
最初は単色で開いた花火が、虹色にキラキラする花火です。
打上げ無しで、連続で花火が開く「kurt.grigg 作成」のJavaScriptです。
前回掲載分は削除し、新しく KURT'S DHTML で見つけたJavaScriptを改造しました。
花火の光点をサイズ指定でき、花火を文章や画像の上に表示させるか下に隠すか等の指定ができるようにしました。

元は同じ「kurt.grigg の原本」ですが、前回掲載分と違って、原本のソースの中身が大きく修正されています。
１．花火が画面からはみ出すことが無いので、スクロールバーがチラチラしません。
２．原本自体が即時関数で囲まれていて、同じJavaScriptのソースを複数使用できます。
３．HTML4時にブラウザIE11で少し注意が必要。説明は原本の方に記述してあります。

■原本のJavaScriptはこちら→　花火３-１■連発花火（div）kurt.grigg 原本
■連続で透明な花模様が開くJavaScriptはこちら→　花火３-２■連発花模様（div）kurt.grigg
■外部jsにして複数同時のJavaScriptはこちら→　花火４■複数の連発花火（div）kurt.grigg
■外部jsにして複数同時のJavaScriptの原本はこちら→　花火４-１■複数の連発花火（div）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>ふわふわ■花火３　連発花火（div）kurt.grigg</title>

<!--★背景画像設定。不要なら削除。ここから-->
<style type="text/css"><!--
body{  /*★今回使用した背景画像は横幅472px高さ23pxの細い横長の画像です*/
background:url(katu2.gif) repeat-x left bottom fixed #000;/*★下側に横並び指定。固定位置。背景色黒色*/
}
--></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=['#000','#f00','#000','#0f0','#f0f','#fff','#ffa500','#000','#fff000'];

var ss=4;    //★原本1。花火の光点の大きさ。単位px。光点はdivの正方形なので、その縦横サイズ
var n=14;    //★原本14。光点の数
var inZ=-1;  //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var rs=40;   //★原本30。花火が開く速度。数値が小さいほど速い

//指定ここまで----------------------------------------------------------------------------------------------------
var launchColour="#0f0";  //緑色。ページを開いた時の最初の花火の色
var y=200, x=200, xs=190; //ページを開いた時の花火の表示縦位置、横位置、花火の大きさ
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+';"><\/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(100+Math.random() * (o/4));//花火の開く大きさがランダムになる
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){
 var ranss =Math.round(1+Math.random()*ss);//修正
 f[i].backgroundColor=showerCol[Math.floor(Math.random()*showerCol.length)];
 f[i].width=ranss+"px"; f[i].height=ranss+"px";//修正
 }
}
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