マウスストーカー１１■文字■マウスから文字の赤い泡

<!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:#acf;}/*★背景色指定。水色。不要なら削除*/
--></style>

</head>
<body> 

<!--★コピーここから-->
<script type="text/javascript"><!--
/*===================================================================
文字泡のマウスストーカー　By(オリジナルJavaScript) : http://ijichi.easter.ne.jp/java8/osakana3.html
★ブラウザIE専用を他ブラウザ対応へ改造。併用の魚を削除し、画像の泡を文字の泡へ変更　 2017/06/09
====================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★泡文字指定。増減可能。色を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し。
var moj=["★","●","&hearts;"];         //★&hearts;はハートの特殊文字
var fsz=["8px","10px","14px","18px"];   //★泡文字のサイズ。増減可能。px指定でも%指定でも可能
var Clrs=["#fff"];                      //★泡文字の色。増減可能。複数指定の時は("色","色","色")で
var no=15;        //★画面に出る泡の表示数
var spd=20;　　   //★速度指定。原本20。小さいほど速い
var opa=0.8;      //★泡文字の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var bhx=-30;      //★マウスと泡文字の横位置。マイナス指定で左側
var bhy=-30;      //★マウスと泡文字の縦位置。マイナス指定で上側

/*★↓泡文字の影指定をCSS形式で記述。輪郭線やボカシ用。好みで変更可。指定不要ならvar snowcss="";で。見本は赤色のボカシ*/
var snowcss="text-shadow: 0px 0px 15px #f00;";

//指定項目ここまで--------------------------------------------------
var dx=[], xp=[], yp=[];      // coordinate and position variables
var am=[], stx=[], sty=[];    // amplitude and step variables
var i, w, h;
for(i=1; i<( no+1); i++){
document.write("<div id='dot"+i+"' style='position:absolute; display:none; top:0; left:0; opacity:"+opa+"; font-size:"+fsz[(i-1)%fsz.length]+"; color:"+Clrs[(i-1)%Clrs.length]+";"+snowcss+"'>"+moj[(i-1)%moj.length]+"</div>");
}
w=window.innerWidth;
h=window.innerHeight;
document.onmousemove=function(e){xp[0]=e.pageX;yp[0]=e.pageY;}
for (i=1; i<(no+1); i++) {
dx[i] = 0;                                // set coordinate variables
xp[i] = 60+Math.random()*(w-50);  　　　　// set position variables
yp[i] = 30+Math.random()*(h-10);
am[i] = Math.random()*20;                 // set amplitude variables
stx[i] = 0.2 + Math.random()/10;          // set step variables
sty[i] = 4 + Math.random();               // set step variables
}
function star() {
for (i=1; i<(no+1); i++) {  // iterate for every dot
var lay=document.getElementById("dot"+i).style;//■簡略のため追加
yp[i] -= sty[i];
if (yp[i] <30) {
xp[i] = xp[0]; yp[i] = yp[0];
stx[i] = 0.2 + Math.random()/10; sty[i] = 4 + Math.random();
if(yp[i]<30){ lay.display="none";}
else if(yp[i]>=30){ lay.display="block";}
}
dx[i] += stx[i];
lay.top=yp[i]+bhy+"px";
lay.left=xp[i]+am[i]*Math.sin(dx[i])+bhx+"px";
}
setTimeout(star, spd);
}
star();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
マウスストーカー１１■文字■ マウスから文字の赤い泡 最終修正日 : 2017/06/09

　マウスストーカー１１■文字■　マウスから文字の赤い泡　　　　最終修正日 : 2017/06/09
