ふわふわ■花火９　打上げ花火(div)

<!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)</title>

<!--★背景画像設定。不要なら削除-->
<style type="text/css"><!--
body{
background:url(drw4.jpg) no-repeat #000;/*★背景画像指定。繰り返し無し。背景色黒色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦400px*/
}
--></style>
<!--★背景画像設定。ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*================================================================
打上げ花火  Script by：http://himajin.moo.jp/freejava/hanabi.html（サイト：http://himajin.moo.jp/）
★原本の旧ブラウザ対応分削除。HTML5対応。文字部分削除で角丸指定のdivのみ使用。　　2016/06/07
==================================================================*/
(function(){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

//★花火が開いた後に変化する光の種類。１個の光点が色変化します。増減可能
var Colors=['#f00','#0f0','#fff','#f0f','#ffa500','#ff0','#0f0','#fff','#f0f'];

var wh=5;            //★花火の光点のサイズ。divの縦幅横幅。単位px
var inZ=-1;          //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var Pos="absolute";  //★スクロールで移動するか？　固定:fixed 　移動:absolute
var spd=100;         //★原本100。花火が開いていく速度。数値が小さいほど速い

//指定ここまで-----------------------------------------------------------------------------
var rscolor=sColors[Math.floor(Math.random()*sColors.length)];
var w=window.innerWidth-18-wh;
var h=window.innerHeight-18-wh;
var staY=h, startY=200, startX=w/2;
var radius =0, last_radius=w/8;//原本w/8。花火の大きさ
var c_count=0, i=0, deviatY=1, mp=Math.PI*2, f=[], tp;
var sss="";
for(i=0;i<mp;i=i+0.3){
sss +="<div style='position:"+Pos+";width:"+wh+"px;height:"+wh+"px;background:"+rscolor+";top:"+staY+"px;left:"+startX+"px;border-radius:50%;z-index:"+inZ+";'id='bon"+i+"'></div>";
}
document.write(sss);
function uchiage(){
if(startY < staY){staY-=10;for(i=0;i<mp;i=i+0.3){ f[i].top=staY+tp+"px";} setTimeout(uchiage,50);}
else{radius=20; hanabi();}
}

function hanabi(){
if(last_radius > radius){
    radius +=10;
    for(i=0;i<mp;i=i+0.3){
        var pointX=startX + Math.cos(i)*radius;
    (deviatY===0.3) ? katamuki=(pointX-startX)*0.4 : katamuki=0;
        var pointY=startY + Math.sin(i)*radius*deviatY+katamuki;
    f[i].top=pointY+tp+"px"; f[i].left=pointX+"px";
    }
    setTimeout(hanabi,spd);
}else if(c_count<300){
    for(i=0;i<mp;i=i+0.3){
    var rcolor=Colors[Math.floor(Math.random()*Colors.length)];
    f[i].backgroundColor=rcolor; c_count++;
    }
    setTimeout(hanabi,spd);
}else{
    rscolor=sColors[Math.floor(Math.random()*sColors.length)];
    radius=20; c_count=0;
    var scrX=w-last_radius*2;
    startX=Math.floor(Math.random()*scrX)+last_radius;
    startY=Math.random()*last_radius+last_radius;
    staY=h-20;
(!(Math.floor(Math.random()*3)))?deviatY=0.3:deviatY=1;//原本3は楕円形の花火が出現する確率。数値が小さいと多くなる
    for(i=0;i<mp;i=i+0.3){
    f[i].backgroundColor=rscolor; f[i].top=staY+tp+"px"; f[i].left=startX+"px";
}
uchiage();
}
}

function init(){
tp=window.pageYOffset;
for(i=0;i<mp;i=i+0.3){ f[i]=document.getElementById("bon"+i).style; }
uchiage();
}
init();
})();//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
花火９■ 打上げ花火(div) 最終修正日 : 2016/06/07

　花火９■　打上げ花火(div)　　　　最終修正日 : 2016/06/07
