JavaScript

JavaScript活用法：マウスカーソルで文字を追尾させるユニークなウェブ演出テクニック

  /

ウェブ技術が目まぐるしく進化する現代、多くのウェブサイトやブログがユーザーを引きつけるために、独自性と創造性に溢れたコンテンツを追求しています。
この記事では、そんな創造性の一環として、JavaScriptのdocument.onmousemoveイベントを使ったユニークな演出方法を紹介します。
具体的には、ウェブページ上でユーザーがマウスを動かすと、そのカーソルに文字が追尾するというものです。プログラミング初心者から上級者まで、このシンプルでありながら魅力的な技術を用いることで、訪れたユーザーに忘れがたい印象を与えることができるでしょう。

Contents

追尾文字のためのCSS設定

追尾させたい文字を定義するために、まずはCSSで基本のスタイリングを行います。
ここでは#idTracというIDを持つ要素を用いて、この要素にposition: absolute;を設定し、ページ内の任意の位置に配置できるようにします。この設定により、JavaScriptで動的に位置を変更した際にも、スムーズに追従させることが可能になります。

<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>

マウスカーソルに文字を追尾させるJavaScriptの実装

次に、マウスカーソルの動きに合わせて文字が追尾するよう、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の構成

最後に、HTMLを使って追尾する文字と、その文字が表示されるコンテキストを設定します。
ここではidTracというIDを持つdiv要素を追尾対象とし、それを包含するidWrapで文章を囲むことで、中央揃えのタイトルを表示させます。

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

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

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

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

実際にこの技術を体験できるデモページを用意しました。
実装したい方や、興味がある方はぜひアクセスしてみてください。リアルタイムでマウスカーソルに文字が追尾する様子を見ることができ、その魅力を直接感じることができます。

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

さらにこの技術は、テキストだけでなく画像など他の要素にも応用可能です。例えば、特定のイベントやキャンペーンを宣伝するアイコンをマウスカーソルに追尾させることで、ユーザーの注意を引きつけることができます。このように、シンプルながらも多彩な応用が可能なdocument.onmousemoveイベントを使った演出は、ウェブサイトやブログの魅力を一層引き立てることでしょう。

最後に

今回紹介した技術は、JavaScriptの基本的な使い方を理解している方であれば、比較的簡単に実装することが可能です。もちろん、初心者の方にとっても、このようなインタラクティブな機能を実現する過程で、プログラミングの楽しさやウェブ開発の基本を学ぶ絶好の機会になるでしょう。ぜひこの機会に、JavaScriptを使った創造的なウェブ演出に挑戦してみてください。

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

onmousemove マウスカーソル 追尾
関連記事