制作時期:

mouse-follow-animation

マウスに追従するアニメーションのサンプルです。※ パソコンのみで確認できます。

ソースコード

https://github.com/ki-hi-ro/mouse-follow-animation

GitHubからZIPファイルのダウンロードが可能です。Code → Download ZIPと進んでください。

2つの要素

JavaScript (jQuery)

JavaScript で、cursorとfollowerというIDを持つdiv要素を生成して、bodyタグの中に入れています。

cursorとは、中心にある点のことです。

一方、followerとは、後から付いて来る丸い円のことです。

var body = document.body,
           cursor = document.createElement("div"),
           follower = document.createElement("div");

           cursor.id = "cursor";
           follower.id = "follower";

           body.appendChild(cursor);
           body.appendChild(follower);

色やスピードを変えるには

CSS (sass)

cursor(中心にある点)の色と追従のスピードを変化したい時は、以下の部分を変更します。

#cursor {
        background: gray;
        transition: .5s ease-out;
    }

follower(後から付いて来る丸い円)の場合は、以下の部分です。

transitionは、cursorよりも遅めに設定するといい感じになります。

#follower {
        background: #000;
        transition: .8s ease-out;
    }

参考サイト

マウスストーカーの実装方法のご紹介 | 株式会社ジーニアスウェブ