どうも！LSSです！！
昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。
※1/25追記。PC（Windows＋Chrome）とiPhone7で動作確認していましたが、Androidスマホで動作しなかったため、一部コード修正しました。
コード
<style>
#stalker{
position:absolute;
pointer-events: none;
transition:linear 0.1s;
}
</style>
<div id="stalker">^^) _旦~~</div>
<p>
<script>
stkx=0;stky=0;
pntx=0;pnty=0;
stks=10;//速度調整
document.addEventListener('mousemove',mv,false);
document.addEventListener('touchmove',mvt,false);
timer=setInterval(function(){
stkx=(stkx*stks+pntx)/(stks+1);
stky=(stky*stks+pnty)/(stks+1);
stalker.style.left=stkx+'px';
stalker.style.top=stky+'px';
},100);
function mv(e){
pntx=e.pageX-50;
pnty=e.pageY-20;
}
function mvt(e){
pntx=e.touches[0].pageX-50;
pnty=e.touches[0].pageY-20;
}
</script>
</p>
以下、長々と解説が続きます。
コード解説 HTML部分
<div id="stalker">^^) _旦~~</div>
この１行が、ストーカー本体になります。
赤太字部分を書き換えると、ストーカーの見た目が変わります。
imgタグにして画像がついてくるようにしてもいいですね^^
コード解説 CSS部分
#stalker{
position:absolute;
pointer-events: none;
transition:linear 0.1s;
}
まず、ストーカーとなる部分に関してCSSで最低限の設定を行っています。
position:absolute;
ストーカーがページ内を自由に動き回れるように「絶対位置指定」となるpositionを設定しています。
こうしておくと、leftやtopプロパティで「（ページ内の要素構成にとらわれない）ページ上の絶対位置」を指定する事ができるようになります。
pointer-events: none;
ストーカーの大きさや配置によっては、マウスカーソルと重なってしまう事もあります。
そうなると、リンククリックなどの通常操作をストーカーが妨害してしまう事になりますが、この pointer-events プロパティを none に設定しておく事で、ストーカー自体がマウスの操作対象から外れ、クリック等の操作時には「無いもの」として扱われる事になります。
transition:linear 0.1s;
ストーカーがマウスを追うように移動する指定は、JavaScriptのタイマーによって行います。
今回はそれを「0.1秒ごと」に実行するタイマーとして設定しましたが、CSSの transition にも「0.1秒かけて変化する」よう設定しておく事で、
- JavaScriptからは0.1秒ごとに位置を指定する
- 次の0.1秒までの変化はCSSによって滑らかに変化させる
という、より滑らかな動きが実現する事になります^^
コード解説 スクリプト部分
まず、５つの変数を用意します。
stkx=0;stky=0;
pntx=0;pnty=0;
stks=10;//速度調整
stkx、stkyはストーカーの座標（位置）管理用、
pntx、pntyはマウスカーソルの座標（位置）管理用、
stksはストーカーの移動速度調整用（小さくすると速く、大きくすると遅くなる）です。
次に、イベントリスナーを２つ設定しています。
document.addEventListener('mousemove',mv,false);
document.addEventListener('touchmove',mvt,false);
それぞれ「mv」「mvt」という関数（function）を呼び出しますが、１行目の「mousemove」は「マウスカーソルが動かされた時」、２行目の「touchmove」は「タッチ位置が移動した時」で、それぞれ「PC用」「スマホ・タブレット用」に用意しています。
PC用の関数「mv」内では、
function mv(e){
pntx=e.pageX-50;
pnty=e.pageY-20;
}
単純に変数pntx、pntyにカーソル位置を代入しています。
-50、-20と少し位置をずらしています。（この場合、実際のカーソル位置より少し左上にストーカーが来る事になります。）
お好みで調整する事ができます。
スマホ用の「mvt」内では、
function mvt(e){
pntx=e.touches[0].pageX-50;
pnty=e.touches[0].pageY-20;
}
「.touches[0]」を途中に挟んでいる以外は全く同じです。
さて、実際にストーカーがカーソルを追いかけるのは
「0.1秒ごとに実行されるタイマーでストーカー位置をカーソル位置に徐々に寄せていく処理」
によるものですが、それが以下の部分です。
timer=setInterval(function(){
stkx=(stkx*stks+pntx)/(stks+1);
stky=(stky*stks+pnty)/(stks+1);
stalker.style.left=stkx+'px';
stalker.style.top=stky+'px';
},100);
「setInterval( 処理を行う関数 ,100);」という書式ですが、関数を「function(){処理}」の形でそのまま書いています。
stkx=(stkx*stks+pntx)/(stks+1);
stky=(stky*stks+pnty)/(stks+1);
この２行で、X座標・Y座標それぞれについて「ストーカー座標をちょっとカーソル座標に寄せる」という計算を行い、
stalker.style.left=stkx+'px';
stalker.style.top=stky+'px';
この２行で、ストーカーとなるdiv要素のCSSプロパティ「left」と「top」に計算後のストーカー座標を代入しています。
※座標を寄せる計算についての参考記事：座標計算 - Little Strange Software
あとがき
ごく単純に作ってみました。
昔、作った時はもう少し手間がかかったような気がしますが、
e.pageX
e.pageY
で座標が取得でき、
stalker.style.left=stkx+'px';
stalker.style.top=stky+'px';
で表示位置を設定できたので、思いの他あっさり作れた気がします。
「ありきたりじゃないマウスストーカー」というアイデアもありますが、それはまた別の機会に出すかも。出さないかも。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
