どうも！LSSです！！
以前、記事内で花火を打ち上げるようなものを作りました。
今回はそれの改変で「訪問した読者さんが好きな位置で打ち上げる事ができる花火」を作ってみました^^
前回までのコードはJavaScript不使用でしたが、今回はJavaScriptを使用しています。
遊び方
画面上の何もないところを適当にあちこちクリックまたはタップしてみてください。
そこから花火が打ち上げられます。
同時に最大１０発まで打ち上げる事ができます！！
コード
<style><!--
@keyframes hnb{
0%{top:300px;width:5px;height:2px;}
60%{top:0px;width:5px;height:2px;}
80%{top:0px;width:150px;height:10px;}
100%{top:0px;width:150px;height:0px;}
}
.c1{
position:absolute;
display:inline-block;
transform-origin:0%;
background-image:linear-gradient(90deg,transparent 30%,transparent 32%,lightblue 50%,transparent 50%,transparent 52%,orange 70%,transparent 70%,transparent 72%,red 90%);
animation:hnb 12s linear 1 normal forwards;
color:#ffffff00;
}
--></style>
<div id="gamen" style="position: absolute; left: 0px; top: 0px;"> </div>
<script>// <![CDATA[
h=0;
hmax=10;
gm=[];
if(document.uniqueID){
document.body.attachEvent("onclick",clk);
}else{
document.body.addEventListener("click",clk,false);
}
txt='';
for(i=0;i<hmax;i++){
txt+='<div id="gamen'+i+'" style="position: absolute;"></div>';
}
gamen.innerHTML=txt;
for(i=0;i<hmax;i++){
gm[i]=document.getElementById("gamen"+i);
}
function clk(ev){
txt='<div style="position: absolute;left:0px;top:0px;">';
for(i=0;i<360;i+=30){
txt+='<div class="c1" style="transform: rotateZ('+i+'deg);">.</div>';
}
txt+='</div>';
gm[h].style.left=ev.pageX+'px';
gm[h].style.top=(ev.pageY-300)+'px';
gm[h].innerHTML=txt;
h++;
h%=hmax;
}
// ]]></script>
一部解説
CSSのアニメーションを指定する部分で、
以前は
animation:hnb 12s linear infinite normal;
だった部分を
animation:hnb 12s linear 1 normal forwards;
と書き換えています。
infinite=無限繰り返しを１回再生に、最後のforwardsは再生後、アニメの最後の状態を保つ、という指定です。
<div id="gamen" style="position: absolute; left: 0px; top: 0px;"> </div>
花火を描画するための枠ですが、ここで
position: absolute; left: 0px; top: 0px;
を指定する事で、「記事の中」という枠組みを超えて「ブラウザ内の画面全体」を扱えるようにしています。
if(document.uniqueID){
document.body.attachEvent("onclick",clk);
}else{
document.body.addEventListener("click",clk,false);
}
ifでブラウザの判定を行い、クリックイベントに対して発動する関数を指定しています。
document.body.attachEvent("onclick",clk);
はIEの場合の指定、
document.body.addEventListener("click",clk,false);
がIE以外の場合の指定になります。
（でもGoogleChromeでしか動作確認していません^^;）
いずれも、"onclick"または"click"が「クリックされた時」のイベントを指定、「clk」が呼び出す関数名（こちらは任意の名前）となります。
function clk(ev){
処理
}
が「クリックされた時に発動する処理」を実際に書いている部分となります。
evという変数（これも任意の名前）に「イベント」が入り、処理のうちで
gm[h].style.left=ev.pageX+'px';
gm[h].style.top=(ev.pageY-300)+'px';
のようにev.pageXで「イベントが発生した位置のx座標（横位置）」を取り出す事ができます。
（位置を取り出すのに、clientXとかoffsetXとかscreenXとかxとか色々あり、それぞれ少しづつ意味が違うようです。）
最後に
手前味噌ですが、これ結構遊べて面白いですねｗ
クリックから開くまで、位置も時間もラグがあるので「仕掛けてる感」が味わえます^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
