マウスストーカー１-２■文字■　虹色のキラキラ星 -2013年版改造-

●2016/04/23：即時関数で囲んで、グローバル変数を消しました。
原本は「Tinkerbell Magic Sparkle」（ティンカーベルの魔法のキラキラ？）という、きらめく光のマウスストーカーです。
その2013年の最新版は、キラキラがカラフルな虹色になり、お好きな単色に変更することも可能になりました。
ただし、改造してあります。
改造の理由は、2013年の最新版の原本はHTML5では内容物が無いと動作しないからです。
2005年の旧版は、内容物が無くても動作しました。
そのため2005年版と2013年の最新版を合体して、内容物が無くてもHTML5でも動作するように改造しました。
もちろん画面縦幅を超える文章や、div等で作成した空間があれば、2013年版の原本はHTML5でも動作します。

１色だけ指定できる2005年版の原本はこちらから。
１色指定か虹色指定ができる2013年版の原本はこちらから。
英語サイトの2013年版原本はmf2fm.comから。こちらは白背景です。

外部js用はこちら　→　マウスストーカー１-２外部js用■文字■虹色のキラキラ星 -2013年版改造
お好みの複数色指定可能分はこちら　→　マウスストーカー１■文字■複数色のキラキラ星

<!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>マウスストーカー１-２■文字■　虹色のキラキラ星 -2013年版改造-</title>

<style type="text/css"><!--
body{background:#000;}/*★背景色指定。黒色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//in addition to "random" can be set to any valid colour eg "#f0f" or "red"
var colour="random";//★左記の"random"の項目に色名を記述すると記述した１色になる。このままでは虹色
var sparkles=50;    //★原本50。キラキラ星の数

//指定ここまで-----------------★内容物が無くてもHTML5動作可能へ　 2016/04/23-----------
/****************************
*  Tinkerbell Magic Sparkle *
*(c)2005-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=window.innerWidth, shigh=window.innerHeight;
var sleft=sdown=0;
var tiny=[], star=[], starv=[], starx=[], stary=[], tinyx=[], tinyy=[], tinyv=[];
window.onload=function() {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  sparkle();
}
function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;//■2013年版追加
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout(sparkle, 40);
}
function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else { star[i].style.visibility="hidden"; starv[i]=0; return;}
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;//■2013年版追加
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}
function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return;}
  }
  else tiny[i].style.visibility="hidden";
}
document.onmousemove=function (e){ y=e.pageY; x=e.pageX; sdown=window.pageYOffset; sleft=window.pageXOffset;}
function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
/*■2005年分削除  div.style.backgroundColor=color;*/
  return (div);
}
function newColour() {   /*■2013年版追加*/
  var c=new Array();
  c[0]=255;
  c[1]=Math.floor(Math.random()*256);
  c[2]=Math.floor(Math.random()*(256-c[1]/2));
  c.sort(function(){return (0.5 - Math.random());});
  return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
}
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１-２■文字■ 虹色のキラキラ星 -2013年版改造- 最終修正日 : 2016/04/23

　マウスストーカー１-２■文字■　虹色のキラキラ星 -2013年版改造-　　　　最終修正日 : 2016/04/23