JavaScript でマウスストーカーを作る

JavaScript で作ることが出来る要らないギミックの代表ですが、原理はとっても簡単なので作り方を紹介します。すぐにブラウザバックしたくなるギミックの1つですね。

普通のマウスストーカーでは面白く無いので、CSS の transition を使ってヌルっと付いてくる感じにしてみました。

mouse-stalker

ネイティブ JS でマウスストーカー

jQuery なんか使わずネイティブ JS で作ってみます。

JavaScript

(function() {
    var doc = document;
    var body = doc.body;
    var stalker = doc.createElement("div");
    stalker.id = "stalker";
    stalker.innerHTML = '<img src="画像の URL" alt="マウスストーカー" width="70" height="70">'; //表示させる要素 画像であれば img 要素を入れる
    body.appendChild(stalker);

    body.addEventListener("mousemove", function(e) {
          stalker.style.left = e.clientX - 35 + "px"; //35 は要素の長さの半分
          stalker.style.top = e.clientY - 80 + "px"; //80 は縦の位置 各自調整
    }, false);

})()

CSS

#stalker {
    position: fixed;
    transition: left 1.5s ease-in-out 0s, top 1.5s ease-in-out 0s; /*1.5s は移動時間*/
    -webkit-transition: left 1.5s ease-in-out 0s, top 1.5s ease-in-out 0s; /*webkit 系のクロスブラウザ*/
    z-index: 9999;
}

仕組みは簡単で、mousemove を キャッチして JavaScript で position の top と left 値を変更します。アニメーション部分は CSS の transition で値を変化させることでヌルっと移動しているように見せています。

マウスストーカーというと重いイメージですが、CSS に色々押し付けることでかなり身軽なマウスストーカーを作ることが可能です。

デザインを変更する場合は JS を変更する必要はなく、CSS のみを色々変えればそれなりに面白いものが作れます。

まとめ

とは言ったものの、ページ上に何かキラキラと降ってくるギミックと同じく嫌われるギミックの代表です。昔はよく見ましたが最近はめっきり見ません。技術としてはとても面白い技術だと思うので、何か画期的な利用法があれば面白そうです。