デザイン Edit : 2019.11.26 Update : 2024.11.07

カーソルに丸がくっついてくるマウスストーカーの作り方

Contents

やりたいこと
参考
HTML
JS
CSS

やりたいこと

このページに実装しているような、以下項目を網羅するマウスストーカーを作る。

・マウスの動きに合わせて要素がくっついてくる
・マウスホイールの動きに合わせてスクロールしても要素がくっついてくる
・aタグにホバーすると要素の大きさを変更できる

一番簡単かつ、最終的に満足いく挙動を実装できた方法を記載します。

参考

https://codepen.io/jm4works/pen/oJqjaG

HTML

bodyタグの直下などに、ポインター用のdivを配置

<div class="mouse"></div>

1	<div class="mouse"></div>

JS

const mouse = $(".mouse");

function Cursor(element, options) {
  function stringNode(node) {
    var tmpNode = document.createElement("div");
    tmpNode.appendChild(node.cloneNode(true));
    return tmpNode.innerHTML;
  }

  var intSize = parseInt(options.size);
  function setSize(size, scale) {
    if (scale) {
      scale = `${scale}`;
      element.css({
        "transform" : `scale(${options.hoverSize})`,
        "opacity" : ".6"
      });
    } else {
      size = parseInt(size);
      element.css({
        width: size + "px",
        height: size + "px",
        transform: "none",
        opacity : "0.7"
      });
    }
  }

  setSize(options.size);

  document.onmousemove = e => {
    element.css({
      left: e.clientX - parseInt(options.size) / 2 + "px",
      top: e.clientY - parseInt(options.size) / 2 + "px"
    });
    elementType = stringNode(e.target)
      .replace(/\</g, "")
      .split(">")[0]
      .split(" ")[0];
    //console.log(elementType)
    if (["a", "button", "input"].includes(elementType))
      setSize(options.size, options.hoverSize);
    else setSize(options.size);
  };
}

Cursor(mouse, {
  size: "30px", // Width and Height
  hoverSize: 0.5 // Scale size
});

const mouse = $(".mouse");

function Cursor(element, options) {

function stringNode(node) {

var tmpNode = document.createElement("div");

tmpNode.appendChild(node.cloneNode(true));

return tmpNode.innerHTML;

}

var intSize = parseInt(options.size);

function setSize(size, scale) {

if (scale) {

scale = `${scale}`;

element.css({

"transform" : `scale(${options.hoverSize})`,

"opacity" : ".6"

});

} else {

size = parseInt(size);

element.css({

width: size + "px",

height: size + "px",

transform: "none",

opacity : "0.7"

});

}

setSize(options.size);

document.onmousemove = e => {

element.css({

left: e.clientX - parseInt(options.size) / 2 + "px",

top: e.clientY - parseInt(options.size) / 2 + "px"

});

elementType = stringNode(e.target)

.replace(/\</g, "")

.split(">")[0]

.split(" ")[0];

//console.log(elementType)

if (["a", "button", "input"].includes(elementType))

setSize(options.size, options.hoverSize);

else setSize(options.size);

};

}

Cursor(mouse, {

size: "30px", // Width and Height

hoverSize: 0.5 // Scale size

});

・opacityの設定で、丸の透明度を変更できます。
・hoverSize: 0.5にすることで、aタグにhoverした際に丸が小さくなるよう設定しています。値によって小さくしたり大きくしたりすることが可能です。

CSS

.mouse {
  background: black;
  border-radius: 50%;
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
}