ふわふわ■中心点６-２　シャボン玉の停止開始付 -雛形倶楽部-

がんばって火を噴けるようになって、
おじさんのような立派な竜になるんだ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>ふわふわ■中心点６-２　シャボン玉の停止開始付 -雛形倶楽部-</title>

<!--★今回の下記のCSS指定はJavaScriptとは無関係なので削除可-->
<style type="text/css"><!--
body{
background:url(ira30a.jpg) right 50px no-repeat #acf fixed;
}/*★竜の背景画像固定指定と背景色水色指定*/

/*★ボタン位置指定*/
#bt{position:fixed;top:50px;left:10px;}/*★固定位置指定ですが、お好みで*/

/*★セリフ指定*/
#serihu{
margin-top:150px;/*★上からの位置指定*/
width:300px;
padding:10px;/*★余白*/
border:solid 1px #555;/*★枠線　濃灰色*/
border-radius:20px;/*★角丸指定*/
background:#eee;/*★背景色　薄い灰色*/
color:#555;/*★文字色　濃灰色*/
text-align:center;/*★文字の左右中央位置指定*/
}
--></style>
<!--★今回のCSS指定はJavaScriptとは無関係↑-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です。下記1行はボタン指定。「bt1」「bt2」の２個のid は必須ですが、「bt」のidは不要なら削除-->
<div id="bt">
<input type="button" value="停止" id="bt1" title="シャボン玉が消える">
<input type="button" value="開始" id="bt2" title="シャボン玉が出る">
</div>

<!--★下記はセリフ指定。不要なら削除-->
<p style="margin-top:150px;" id="serihu">がんばって火を噴けるようになって、<br>
おじさんのような立派な竜になるんだ！</p>

<img src="ira9.png" style="position:fixed;top:320px;left:10px; height;170px;"><!--★タツノオトシゴの画像指定。不要なら削除-->

<script type="text/javascript"><!--
/*=============================================================================
停止開始付きシャボン玉　BY　http://ayanaotakashun.com/sample/syabon/syabon_d.htm（雛形倶楽部）
★ブラウザIE以外でも動作可に改造。HTML5対応、複数画像、位置指定、重ね方、透過指定追加
停止は関数は動作中で表示のみを消した　 2021/08/28
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★シャボン玉の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["ira10.png","ira11.png","pe1.gif"];
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var kazu=30;         //★シャボン玉の画像表示数
var inZ=-1;          //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var Pos="fixed";     //★スクロールで移動するか？　固定:fixed 　移動:absolute
var startx=100;      //★吹き出し位置 ｘ座標(左からの位置) left
var starty=400;      //★吹き出し位置 ｙ座標(上からの位置) top
var sizemax=60;      //★シャボン玉最大表示サイズ。画像実寸ではありません
var sizemin=10;      //★シャボン玉最小表示サイズ。画像実寸ではありません
var maxOp=1;         //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.4;      //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=30;          //★原本50。全体の速度。数値が小さいほど速い

var lr=1;            //★原本1。正なら右向き。-1にすると左向き
var ud=1;            //★原本1。正なら上向き。-1にすると下向き
var sinpuk=100;      //★原本100。シャボンサインカーブ振幅
var syoki=5000;      //★原本50000。初期バラケ量（小さくすると、最初にどかどかって出てしまう）

//指定ここまで----------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var syabosize=[], opa=[];
var len=ga.length;
var sss="";
for (var i=1;i<kazu;i++) {
syabosize[i]=(sizemax-sizemin)*Math.random()+sizemin;
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
sss+="<img src="+myurl+ga[i%len]+" id='fusen"+i+"' style='position:"+Pos+";left:-500px; z-index:"+inZ+"; opacity:"+opa[i]+";'>";
document.write(sss);
setTimeout(syabon,syoki*Math.random(),i)
}

function syabon(i){
var ob=$("fusen"+i).style;
var yy=parseInt(ob.top)-2*ud;
var myy=Math.abs(starty-yy);
if(myy<25){var xx=lr*(1-Math.pow(0.7,myy))*(100+(i/kazu)*200)+startx;ob.width=myy/25*syabosize[i]+"px";}
else{xx=lr*(Math.sin((myy-25)/100)*sinpuk+100+(i/kazu)*200)+startx;}
ob.left=xx+"px";ob.top=yy+"px";
if(ud>0 ? yy>-20 : yy<window.innerHeight){setTimeout(syabon,spd,i);}//修正
else{ob.left=startx+"px";ob.top=starty+"px";ob.width=0;setTimeout(syabon,syoki*Math.random(),i);}
}

function hidesnow(){ /*■シャボン玉を非表示*/
for (var i=1;i<kazu;i++) {$("fusen"+i).style.visibility="hidden";}}

function visisnow(){ /*■シャボン玉を表示*/
for (var i=1;i<kazu;i++) {$("fusen"+i).style.visibility="visible";}}

$("bt1").onclick=hidesnow;//■追加
$("bt2").onclick=visisnow;//■追加
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>
中心点６-２ シャボン玉の停止開始付 -雛形倶楽部 最終修正時 : 2021/08/28

　中心点６-２　シャボン玉の停止開始付 -雛形倶楽部　　　　　最終修正時 : 2021/08/28
