JavaScriptのdocument.onmousemoveを使って、ブラウザ上でマウスカーソルに文字を追尾させる少し変わった演出をご紹介します。
Contents
ディスプレイ広告
マウスカーソルに文字を追尾させる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アナリティクスタグは流用しないで下さい。