2020-08-06

気分だけでも夏を感じたい

こんにちは。web担当のまるたにです。
今年はコロナで花火大会観に行くの諦めた人も多いでしょう。
気分だけでも花火を味わいたいって人の為(←？？)に
こんなコード作ってみました。

See the Pen
KKzPzjR by 丸谷真奈美 (@mxubsnhv)
on CodePen.

See the Pen
RwabVrz by 丸谷真奈美 (@mxubsnhv)
on CodePen.

<style type="text/css">
body{
background:url(https://www.melike.biz/wp/wp-content/uploads/2018/06/6-2.jpg) no-repeat #000;
<！--↑画像じゃなくても背景色でもいい-->
width:100%;
text-align: center;
background-size: cover;
}</style>


</head>
<body>
<script type="text/javascript"><!--

(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;         //花火が開いていく速度。数値が小さいほど速い

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>

え、難しい？？
それじゃ音でも聴いて夏気分
味わいますか～。