HTML/CSS

マウスカーソルについてくるマウスストーカーの作り方【HTML/CSS】

「マウスストーカー」は、サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます。

本記事では、マウスカーソルの変更や、マウスストーカーの作り方をご紹介します。

マウスカーソルの変更

マウスカーソルを、いつもの矢印ではなくcssで作った図形や画像など、別の要素に置き換えることができます。

今回は、cssの図形に変更したコードで解説します。

 

HTML解説

マウスカーソルの代わりとなる要素「cursor」、カーソルの代わりとなる図形をスタイルする要素「stalker」を設置します。

「stalker」の部分は、imgタグを設置することでその画像が表示されるようになります。

また、jQueryを使用するので、今回はcdnで読み込んでます。

 

CSS解説

bodyに「cursor: none;」とスタイルすることでマウスカーソルを非表示にすることができます。
また、カーソルの前面に要素があってクリックできない状態になっているため、「pointer-events: none;」でクリックできるようにします。

今回はbodyが空なので、「height: 200px;」とスタイルすることで高さ200px以内はマウスカーソルが変更されるようにしています。

 

cssのカーソル

カーソルの幅を「width: 40px; height: 40px;」、jQueryにてカーソルの初期値を「top, left」に指定しているため、カーソルの位置が左上にズレます。
そのため、「margin: -20px 0 0 -20px;」とスタイルすることで、元々のマウスカーソルと同じ位置になるように調整します。

また、クリックができるように「pointer-events: none;」を指定しています。

 

jQuery解説

「e.clientX」「e.clientY」でカーソルの座標位置を取得し、「cursor.css()」でカーソル要素のcssに代入しています。
今回は、topとleftを書き換えています。

 

遅れてついてくるマウスストーカー

マウスカーソルに遅れてついてくるマウスストーカーを作ることができます。

 

HTML解説

マウスカーソルとなる要素とは別に、ストーカーとなる要素も設置します。

 

CSS解説

カーソル要素のcssは、さきほどのマウスカーソルの変更と同じcssです。

 

jQuery解説

カーソルのjsは、さきほどのマウスカーソルの変更と同じjsです。
ストーカーが遅れてついてくるように「stalker.css()」に「setTimeout」で100を指定することで、マウスを動かした0.1秒後にストーカー要素が遅れてついてくるようにしています。

 

ABOUT ME
りん
フロントエンドエンジニア / 趣味ブログ / 沖縄から東京に就職1年SE→ 1年フリーランスSE→ 沖縄移住2年Webデザイナー → 福岡移住1年目フロントエンドエンジニア / HTMLCSS大好物 / JS / PHP / Laravel / WordPress / VScodeでVim使う人