どうも、ソエです!

今回は、マウスカーソルとおまけでマウスストーカーを作ってみました!

現在、マウスカーソルのアイコンが違うと思います!これを、今回は作ってみました!
しかし、これだけでなくホバーしたら違うアイコンとテキストになる、マウスカーソルとマルスストーカーを作っていきます!

では早速行きましょう!

サンプルはこちら!
ホバーするとアイコンとテキストが変わります!

HTMLのコード

まずは、HTMLを見ていきます!

<div class=”cursor”>
  <img class=”cursolimg” src=”画像のURL”>
</div>
<div class=”stalker” sweet=”カップケーキ”></div>
<div class=”flex”>
  <div class=”cup”>
    <img class=”bg” src=”画像のURL”>
  </div>
  <div class=”choco”>
    <img class=”bg” src=”画像のURL”>
  </div>
</div>
<div class=”flex”>
  <div class=”donut”>
    <img class=”bg” src=”画像のURL”>
  </div>
  <div class=”purin”>
    <img class=”bg” src=”画像のURL”>
  </div>
</div>

変わったところは、マウスストーカー(class=”stalker”)の部分に”sweet”が入っていることでしょう。

これはマウスストーカーにつけるテキストの部分のためにsweetという属性を作っただけです。

属性の名前はsweetじゃなくても大丈夫です。
それこそ、nametextだとかでもいいと思います。

HTMLはこれくらいですかね。次はCSS!

CSSのコード

body {
  position: relative;
  cursor: none;
  margin: 0;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}

.cursolimg{
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.stalkerimg{
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.stalker {
  position: fixed;
  top: -26px;
  left: -27px;
  z-index: 2;
  pointer-events: none;
  transition: transform .3s ease-out;
  opacity: 0;
  border: 1px #333 solid;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.stalker::before{
  content: attr(sweet);
  position: absolute;
  width: 100%;
  top: -21px;
  text-align: center;
}

.flex {
  display: flex;
}

.bg {
  opacity: 1;
  transition: .5s ease;
}

.bg:hover {
  opacity: .5;
}

カーソルとマウスストーカーはpositionをfixedにし、スクロールしてもカーソルの位置にくるよう固定しておきます。

マウスストーカーは大きい丸線にしているので、テキストはbeforeで付けることにしました。
マウスストーカーのテキストは、contentをHTMLで付けたsweetのテキストにするためattr(sweet)に。

absoluteにしたりして、topなどで位置調整。

ちゃんとサイト上の要素をクリックできるように、カーソルとマルスストーカーにpointer-eventsをnoneに指定します。
これを指定しないと、カーソルである画像をクリックしているだけの状態になります。

CSSで変わっているのはこれくらいですね。では、JavaScriptいきましょう。

JSのコード

let body = document.querySelector(“body”);
let lwidth = body.clientWidth;
let lheight = body.clientHeight;
let cursor = document.querySelector(“.cursor”);
let cursolimg = document.querySelector(“.cursolimg”);
let imgsrc = cursolimg.getAttribute(“src”);
let stalker = document.querySelector(“.stalker”);
let cup = document.querySelector(“.cup”);
let choco = document.querySelector(“.choco”);
let donut = document.querySelector(“.donut”);
let purin = document.querySelector(“.purin”);

window.addEventListener(“mousemove”, function (e) {
  cup.addEventListener(“mousemove”, function () {
    cursolimg.setAttribute(‘src’, “画像のURL”);
    stalker.setAttribute(‘sweet’, “カップケーキ”);
  })

  choco.addEventListener(“mousemove”, function () {
    cursolimg.setAttribute(‘src’, “画像のURL”);
    stalker.setAttribute(‘sweet’, “チョコレート”);
  })

  purin.addEventListener(“mousemove”, function () {
    cursolimg.setAttribute(‘src’, “画像のURL”);
    stalker.setAttribute(‘sweet’, “プリン”);
  })

  donut.addEventListener(“mousemove”, function () {
    cursolimg.setAttribute(‘src’, “画像のURL”);
    stalker.setAttribute(‘sweet’, “ドーナツ”);
  })

  setTimeout(function () {
    stalker.style.transform = “translate(” + e.clientX + “px,” + e.clientY + “px)”;
    stalker.style.opacity = 1;
  }, 100);
})

e.clientYとe.clientXで、マウスの位置を取得できるのでカーソルに指定。
常にそうさせたいので、window.addEventListener(“mousemove”で囲んでおきます。

stalker.style.transform = ‘translate(‘~’px)’;だけでもいいと思いますが、動きがぎこちないのでsetTimeoutを使用。
マウスストーカーは少し遅らせてカーソルの位置に到着させたいので、最後に100を付けます。

addEventListener(“mousemove”~とsetAttribute(‘sweet’, “テキスト”)で、ホバーしたときにsweetのテキストを変えます。
こうすることで、cssで設定したattr(sweet)も変わります。

終わりに

どうでしたか?

結構長いコードで嫌になるかと思いますが、JavaScriptは画像が多いから長い部分もあります。
動きだけを真似したい場合、読み解けば短くしたりすることも可能だと思います。

他のアニメーションも付け加えたりすれば、面白いマウスカーソルなども作れると思います。

一回、試しに作ってみて下さい!

では、ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

アイコンとテキストが変わるマウスカーソルを作ってみた