【onmousemove】マウスカーソルに文字を追尾させる少し変わった演出

JavaScriptのdocument.onmousemoveを使って、ブラウザ上でマウスカーソルに文字を追尾させる少し変わった演出をご紹介します。

マウスカーソルに文字を追尾させるCSSの記述

※追尾させる文字#idTracにposition:absoluteを設定します。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.8em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#idTrac{
	position:absolute;
}
-->
</style>

document.onmousemoveを使って、ブラウザ上でマウスカーソルに文字を追尾させるJavaScriptの記述

※マウスカーソルの位置を取得し、追尾させる文字（idTrac）に対してテキストと位置を指定してます。

<script type="text/javascript">
<!--
function mousetrac() {
  X = event.x + document.body.scrollLeft;
  Y = event.y + document.body.scrollTop;
  document.all["idTrac"].innerText = "マウスカーソルに追尾中…";
  document.all["idTrac"].style.left= X + 5;
  document.all["idTrac"].style.top = Y + 10;
}
document.onmousemove = mousetrac;
-->
</script>

マウスカーソルに文字を追尾させるHTMLの記述

※DOCTYPEタグの記述があるとChromeブラウザで動作しませんでした。マウスカーソルに追尾させる文字（id=”idTrac”）を用意します。必要に応じて変更して下さい。

<div id="idTrac"></div>

<div id="idWrap">
    <h1>マウスカーソルに文字が追尾します。</h1>
</div><!--/idWrap-->

マウスカーソルに文字を追尾させるデモページ

マウスカーソルに文字を追尾させるデモページ

追尾する文字を画像に変えるとまた違った演出で良い気がします。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。