「マウスストーカー」は、サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます。
本記事では、マウスカーソルの変更や、マウスストーカーの作り方をご紹介します。
マウスカーソルの変更
マウスカーソルを、いつもの矢印ではなく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秒後にストーカー要素が遅れてついてくるようにしています。
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
