【CSS/jQuery】マウスカーソルのカスタマイズしてオリジナルデザインに挑戦しよう!!(デモサンプル付き)
目次
サイトデザイン作成の際に見逃されがちなマウスカーソルですが、UX,UIの観点から見るとマウスカーソルは重要なファクターです。
最近ではカーソルをオリジナルのデザインにして、使いやすさやの向上や、サイトの世界観を表現したサイトも増えてきています。今回はそんなマウスカーソルのカスタマイズに挑戦してみました。
デモ付きですので、コピペで実装できると思います。それではご覧ください！
マウスカーソルを白い丸に変更する
最初にDEMOをご覧ください。今回は赤背景に白の丸がカーソルになるように設定してみました。最近多いですよね。丸のカーソル。
See the Pen
マウスカーソルカスタマイズ１ by Tetsuya Ihata (@tihata)
on CodePen.
続いてこのDEMOで行ったことをHTML,CSS,jQuery別に解説していきます。
HTMLで行っていること
<div id="cursor"></div>
まずはHTMLです。body直下にカーソルになる要素をdivタグで設定します。今回はIDで指定しましたが、もちろんclassでもOKです。
このdivの中に、imgタグを入れてカーソルを画像にすることもできます。
CSSで行っていること
body{
position: relative;
background:#f00;
cursor: none; /*もともとあるカーソルは見えなくなるようにする*/
}
#cursor{
position: fixed;
/*丸の大きさと色の指定*/
background: #fff;
border-radius:20px;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;/*真ん中にくるようにマイナスマージンで調整*/
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
opacity: 0;
}
次にCSSです。まず、cursor: none;で既存のcursorを非表示にします。
その上で、カーソル用に用意した#cursorに装飾を行います。今回の場合「白い20pxの丸」ですね。
場所の設定はposition: fixed;でbodyの一番左上に、カーソルの要素を配置するように設定します。(この場合、topとleftの値の基準値は0なので省略しています。)
最後に、z-indexで一番手前になるようにします。これを設定しておかないと要素の後ろにマウスカーソルが入ってしまいます。また、最前面にカーソル要素があるとどこもクリックできなくなってしまうので、それを防ぐためpointer-events:noneを指定する必要があります。
jQueryで行っていること
最後にjQueryです。基本的なことですが、jQuery自体を読み込む事を忘れないしてください。jQueryの基本については以前記事にしておりますので、初心者の方はぜひご覧ください。
$(function(){
//カーソル要素の指定
var cursor=$("#cursor");
//mousemoveイベントでカーソル要素を移動させる
$(document).on("mousemove",function(e){
//カーソルの座標位置を取得
var x=e.clientX;
var y=e.clientY;
//カーソル要素のcssを書き換える用
cursor.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
});
});
jQueryではmousemoveイベントでカーソルの座標位置を取得し、カーソル要素のCSSに代入しています。今回は基準位置をCSSで画面左上(top:0; left:0;)としたので、その値をマウスの動きで増減するように指定しています。
マウスカーソルについてくるマウスストーカーをつける
続いて、白の丸カーソルに少しおくれてついてくる青い丸(マウスストーカー)を実装してみました。こちらも最初にDEMOをご覧ください。
See the Pen
マウスカーソルカスタマイズ2 by Tetsuya Ihata (@tihata)
on CodePen.
先程のコードに追記して実装した形になります。順に説明していきます。
HTMLでやっていること
<div id="cursor"></div> <div id="stalker"></div>
カーソル要素の下にストーカー要素#stalkerを追加します。HTMLはこれだけです。
CSSでやっていること
body{
position: relative;
background:#f00;
cursor: none; /*もともとあるカーソルは見えなくなるようにする*/
}
/*カーソル要素*/
#cursor{
position: fixed;
/*丸の大きさと色の指定*/
background: #fff;
border-radius:20px;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;/*真ん中にくるようにマイナスマージンで調整*/
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
opacity: 0;
}
/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
position: fixed;
/*丸の大きさと色の指定*/
background: #00f;
width: 60px;
height: 60px;
border-radius:30px;
margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
z-index: 1;/*カーソルの後ろに来るように*/
pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
opacity: 0;
}
CSSではカーソル要素と同様にストーカー要素を追加しました。ストーカーはz-indexをカーソルより手前にしないように注意してください。
jQueryでやっていること
$(function(){
//カーソル要素の指定
var cursor=$("#cursor");
//ちょっと遅れてついてくるストーカー要素の指定
var stalker=$("#stalker");
//mousemoveイベントでカーソル要素を移動させる
$(document).on("mousemove",function(e){
//カーソルの座標位置を取得
var x=e.clientX;
var y=e.clientY;
//カーソル要素のcssを書き換える用
cursor.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
//ストーカー要素のcssを書き換える用
setTimeout(function(){
stalker.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
},140);//カーソルより遅れる時間を指定
});
});
こちらもCSSと同じようにストーカー要素を追加します。コードの26行目でカーソルより遅れる時間を指定してください。ちなみにここの数値は1000=1秒です。
リンクにホバーするとカーソルが変化する
最後にリンクエリアにカーソルを乗せるとカーソルが少し大きくなるようアクションを追加したものを紹介します。こちらもDEMOをご覧ください。
See the Pen
マウスカーソルカスタマイズ3 by Tetsuya Ihata (@tihata)
on CodePen.
同様に解説していきます。
HTMLでやっていること
<div id="cursor"></div> <div id="stalker"></div>
htmlは先程のものと変わりありません。cursor要素とstalker要素を並べています。
CSSでやっていること
body{
position: relative;
background:#f00;
cursor: none; /*もともとあるカーソルは非表示に*/
}
a{
display:inline-block;
margin:40px;
}
/*カーソル要素*/
#cursor{
position: fixed;
/*丸の大きさと色の指定*/
background: #fff;
border-radius:10px;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;/*真ん中にくるようにマイナスマージンで調整*/
z-index: 2;/*一番手前に来るように*/
pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
opacity: 0;
transition: transform 0.1s;/*アニメーションの秒数指定*/
}
/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
position: fixed;
/*丸の大きさと色の指定*/
background: #00f;
width: 60px;
height: 60px;
border-radius:30px;
margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
z-index: 1;/*カーソルの後ろに来るように*/
pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
opacity: 0;
transition: transform 0.5s;/*アニメーションの秒数指定*/
}
#cursor.active,
#stalker.active{
transform: scale(1.4);
}
CSSは45~48行目でtransform: scale(1.4);を指定し、カーソルをリンクエリアに乗せた時に要素が1.4倍になるように指定します。ここで使用している.activeは後ほど説明するjQueryで追加するクラス要素です。
jQueryでやっていること
$(function(){
//カーソル要素の指定
var cursor=$("#cursor");
//ちょっと遅れてついてくるストーカー要素の指定
var stalker=$("#stalker");
//mousemoveイベントでカーソル要素を移動させる
$(document).on("mousemove",function(e){
//カーソルの座標位置を取得
var x=e.clientX;
var y=e.clientY;
//カーソル要素のcssを書き換える用
cursor.css({
"opacity":"0.9",
"top":y+"px",
"left":x+"px"
});
//ストーカー要素のcssを書き換える用
setTimeout(function(){
stalker.css({
"opacity":"0.4",
"top":y+"px",
"left":x+"px"
});
},140);//カーソルより遅れる時間を指定
});
//aタグホバー
$("a").on({
"mouseenter": function() {
//activeクラス付与
cursor.addClass("active");
stalker.addClass("active");
},
"mouseleave": function() {
cursor.removeClass("active");
stalker.removeClass("active");
}
});
});
jQueryでは29行目以下のmouseenterイベントでカーソルがリンクエリアにホバーした時に.activeが付与されるように記述を追加しました。cssとjQueryのあわせ技で動的な動きを実装します。
マウスカーソルをカスタマイズしたときの注意点
最後にカーソルをカスタマイズした時に感じた注意点をお伝えします。
マウスオーバーで何かアクションが必要
従来のマウスカーソルは、リンクエリアにのせると指マークに変化します。
オリジナルのデザインにしてしまうと、このマウスホバーの変化が無くなってしまうので、今回紹介したDEMOのようにホバーアクションを設定する必要があります。せっかくおしゃれなデザインのカーソルにしても使いづらければ本末転倒です。忘れずに設定するようにしましょう。
カーソルはホバーエリアによって色々な形状に変化するので、以下の記事を参考に適宜カーソルの変化を設定してください。
以上で、カーソルのカスタマイズ紹介を終わります。
実装する側からするとなかなか敬遠しがちなマウスカーソルですが、思っていたより記述量が少なく簡単に設定が可能でした。
今回のDEMOを活用いただき、是非自分なりのアレンジカーソルを作成してみてください！
おすすめの記事はこちら
-
HTML・CSS ｜ 2020/04/08【2020年】CSS・Javascript・PHP 非エンジニアも押さえておきたいポイントまとめ
-
JavaScript ｜ 2019/12/05
【型のあるJavaScript】TypeScriptとは？入門編（メリットや環境構築方法など）
-
JavaScript ｜ 2019/11/12
初めてのVue.js「入門編」基礎から学ぼう！サンプルコードで丁寧に解説（郵便番号から住所の自動取得をやってみる）
-
JavaScript ｜ 2019/10/30
スマホOK！スライダーにYouTubeなど自動再生動画を使う方法（slick.js）
-
JavaScript ｜ 2019/08/07
TweenMax.jsを使い、実践的なSVGアニメーションに挑戦してみた!!
-
JavaScript ｜ 2019/03/28
初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！
