　中心点５-１■音符の文字吹き出し★仮　　　　UP日時 : 2016/05/09

見本です。
<!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>ふわふわ■中心点５-１　音符の文字吹き出し★仮</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background:#ffc;}/*★背景色薄黄色*/
#wrap{
position:relative;
background:#ccf;
width:960px;margin-left: auto; margin-right: auto;
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>
<!--★ここからコピー-->

<div id="wrap"><!--★id="wrap"の開始-->

<img src="miho1.gif" style="position:relative;top:250px;left:750px;width:84px;height:143px;"><!--★バッタの画像指定。不要なら削除-->

<p style="margin-top:250px;text-align:center;">見本です。</p>

<script type="text/javascript"><!--
/*==================================================================================
シャボン玉風文字吹き出し　by  http://ijichi.easter.ne.jp/java12/hosigafuru2.html(オリジナルJavaScript)
★ブラウザIE以外の他ブラウザでも動作可能に改造。画像を文字へ変更。位置指定、重ね方、透過指定等追加　 2016/05/09
====================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★文字指定。増減可能。色を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し。&hearts;はハートの特殊文字
var moj=["♪","♪","&hearts;"];
var Clrs=["#f00","#acf","#f0f","#0f0"]; //★文字の色。増減可能

var n=30;           //★文字表示数。原本30
var inZ=1;          //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var Pos="absolute"; //★スクロールで移動するか？　固定:fixed 　移動:absolute
var doc_x=750;      //★原本700。単位px。吹き出し位置(横方向) left
var doc_y=350;      //★原本500。単位px。吹き出し位置(縦方向) top
var sizemax=25;     //★文字の最大表示サイズ
var sizemin=15;     //★文字の最小表示サイズ

var maxOp=0.8;      //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.1;     //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var rota=[-30,0,20,30];  //★文字の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var spd=100;        //★原本50。吹き出す速度。小さいほど速い
var xxx=8;          //★原本8。散らばりの広さ。数字が大きいほど広い

/*★↓吹き出す文字の影指定をCSS形式で記述。黒いボカシ用。好みで変更可。指定不要ならvar fcss="";で。*/
var fcss="text-shadow: 2px 2px 1px #000;";

//指定ここまで------------------------------------------------------------------
var xp=[], yp=[], i=[], l=[], dx=[], stx=[], am=[], ae=[], opa=[], syabosize=[];//追加
var len=moj.length, clen=Clrs.length, rlen=rota.length;//追加
var xp0=doc_x, yp0=doc_y, w=window.innerWidth, h=window.innerHeight;
var sss="";
for (var m=1;m<(n+1);m++){
ae[m]=1;
xp[m]=w*Math.random(); 
yp[m]=h*Math.random();
i[m]=xxx*Math.random()+10;
l[m]=xxx*Math.random()+10;
dx[m]=0;
stx[m]=0.05+Math.random()/10;
am[m]=Math.random()*40;  
opa[m]=Math.random()*(maxOp-miniOp)+miniOp;//追加
syabosize[m]=(sizemax-sizemin)*Math.random()+sizemin;//追加
var ran= Math.floor(Math.random()*clen);//追加
var rrd=rota[Math.floor(Math.random()*rlen)];//追加
sss+="<span id='dot"+m+"' style='position:"+Pos+";left:-500px; z-index:"+inZ+"; font-size:"+syabosize[m]+"px; opacity:"+opa[m]+";color:"+Clrs[ran]+";transform: rotate("+rrd+"deg);"+fcss+"'>"+moj[m%len]+"</span>";
document.write(sss);
}
function STAR_WARS() {
for (m=1;m<(n+1);m++){
var ob=document.getElementById("dot"+m).style;
if(ae[m]===1){ob.display="none";}else{ob.display="block";}
dx[m]+=stx[m];
ob.top=yp[m]+"px";
ob.left=xp[m]-am[m]*Math.sin(dx[m])+"px";
xp[m]=xp[m]-i[m];
yp[m]=yp[m]-l[m];
if(l[m]>3){l[m]=l[m]-0.2;}else{l[m]=l[m];}
if(i[m]>1){i[m]=i[m]-0.4;}else{i[m]=i[m];}
if ((xp[m]<=10)||(yp[m]<=10)){
xp[m]=doc_x-xxx*Math.random()-8; 
yp[m]=doc_y-xxx*Math.random()-6;
i[m]=-xp[m]+xp0; l[m]=-yp[m]+yp0; ae[m]=2;
}
else if (yp[m]>h*9/10){
xp[m]=doc_x-xxx*Math.random()-8; 
yp[m]=doc_y-xxx*Math.random()-6;
i[m]=-xp[m]+xp0; l[m]=-yp[m]+yp0; ae[m]=2;
}
}
setTimeout(STAR_WARS,spd);
}
STAR_WARS();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</div><!--★id="wrap"の終了-->
</body>
</html>
中心点５-１■音符の文字吹き出し★仮 UP日時 : 2016/05/09

　中心点５-１■音符の文字吹き出し★仮　　　　UP日時 : 2016/05/09
