ふわふわ■花火１０　打上げ花模様(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{  /*★今回使用した背景画像は横幅600px高さ75pxの細い横長の画像です*/
background:url(gatc32.gif) repeat-x left bottom fixed #000;/*★下側に横並び指定。固定位置。背景色黒色*/
}
--></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=['#f00','#0f0','#fff','#39f','#f0f','#fa0','#ff0'];

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

var wh=100;          //★花火の光点のサイズ。divの縦幅横幅。単位px
var inZ=-1;          //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var Pos="fixed";     //★スクロールで移動するか？　固定:fixed 　移動:absolute
var opa=0.3;  　　　 //★花火が開いた後の光点の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var spd=100;         //★原本100。花火が開いていく速度。数値が小さいほど速い
var boxcss="box-shadow: 0 0 0 1px #fff;"; //★花火の光点の輪郭線の指定。CSSのbox-shadow指定での白の輪郭線。不要なら var boxcss=""; で

//指定ここまで-----------------------------------------------------------------------------
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/12;//原本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+";opacity:"+opa+";"+boxcss+"' 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";f[i].width=5+"px";f[i].height=5+"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";
    f[i].width=wh+"px"; f[i].height=wh+"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) UP日時 : 2016/06/07

　花火１０■　打上げ花模様(div)　　　　UP日時 : 2016/06/07
