2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
最近は、マウスカーソルの見た目を変えているWebサイトを多く見かけますよね。
特に、「CSS Design Awards」や「Awwwards」などのWebデザインアワードに入賞しているWebサイトでは、デザイン・世界観に合わせてマウスカーソルを変えていることが多いです。
当ブログでレビューしたアワードのWebサイトでも、マウスカーソルの見た目を変えていたWebサイトがありますのでご参考ください。
弊社の制作実績「Venus Belt」でもマウスカーソルを変えており、リンクにホバーさせると変形するアニメーションがついています。アクセスしてぜひ試してみてください。
Venus Belt
スピカデザインの制作実績一覧はこちら
マウスカーソルの見た目を変えることで視覚的にユーザーに情報を伝えることができるため、利用しない手はないですね！
今回はマウスカーソルの見た目を変える方法をご紹介しますが、いきなり高次元なマウスカーソルを作ろうと思ってもハードルが高く感じてしまうと思うので、当記事ではマウスカーソルを変える基本からちょっとおしゃれなマウスカーソルを実装するところまでを解説します。
目次
マウスカーソルの見た目を簡単に変える方法といえば、CSSのcursorプロパティですね。
まずは基本としてcursorプロパティのおさらいをします。
以下Codepen内に代表的なものを書いてみました。各テキストにマウスカーソルを当ててみてください。
See the Pen マウスカーソルをCSSで変更 by spiqa design (@spiqa_design) on CodePen.
cursor: pointer;などはよく使いますね。
指定できる値はたくさんあるので、その他の値は以下サイトをご参照ください。
http://www.htmq.com/style/cursor.shtml
このように決まった形ならCSSで簡単に変更可能ですが、リッチな見た目にしたり、動きをつけるにはCSSだけでは限界があります。
それでは、おしゃれなWebサイトでよく見かける、ドットのような見た目のマウスカーソルを実装してみましょう。
実装にはJavaScriptを使用し、少し難しい内容もありますが、コードをシンプルにしてわかりやすく解説します！
まずは完成したコードで動きを確認してみてください。
See the Pen マウスカーソルの見た目を変更する by spiqa design (@spiqa_design) on CodePen.
ただマウスカーソルがドットになっているだけでは地味なので、リンクにホバーさせた時は色・形が変化する動きをつけています。
それでは言語ごとに解説していきます！
<!--独自のカーソル--> <div id="cursor" class="cursor"></div> <!--動き確認用ボタン--> <a href="#" class="btn">リンク</a>
この方法では、デフォルトのマウスカーソルを非表示にして独自のマウスカーソルをCSSで作成します。
マウスカーソル用のdivタグをHTMLに記述しておきます。場所はどこでもいいですが、わかりやすくbody開始タグ直下などに記述しておきましょう。
Javascriptに渡す用のidと、CSSでスタイル調整する用のclassを、それぞれcursorという名で指定しています。
/*デフォルトのマウスカーソルを非表示にする*/
html,body,a{
cursor: none;
}
デフォルトカーソルをページ上で非表示にします。
/*独自のマウスカーソルを作成*/
.cursor {
position: fixed;
top: -5px; /*座標調整*/
left: -5px; /*座標調整*/
width: 10px;
height: 10px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
z-index: 1000;
transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
transform: translate(0, 0);
pointer-events: none;
}
オリジナルのカーソルを作成します。
注意点としては、カーソルがページ上で常に一番上に配置されるようにz-indexに高い数値を入れておきます。一番上に配置されることでリンクなど他要素をクリックできなくなるので、pointer-events: none;を指定しておきます。
サイズや色、動きの遅延などはお好みで変更してください。
ドットのサイズを大きくしていくと実際のカーソル位置とオリジナルカーソル(ドット)の中心がズレるので、サイズ変更に合わせてtopとleftの数値を調整してカーソル位置とドットの中心を合わせます。
カーソル位置とドットの中心が合っているかわからない場合は、一度ページ全体に指定しているcursor: none;を解除してデフォルトカーソルを表示させて確認しましょう。
/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
top: -20px;
left: -20px;
width: 40px;
height: 40px;
background: rgba(205, 114, 113, 0.5);
}
ホバーした時のclassを作成し、スタイルを指定します。
今回はドットのサイズと色が変化するようにしています。
こちらも同様、変化するサイズに合わせてtopとleftの数値を調整してください。
// カーソル用のdivタグを取得してcursorに格納
var cursor = document.getElementById('cursor');
カーソル用に作成したdivタグをidから取得し、cursorに格納します。
// カーソル用のdivタグをマウスに追従させる
document.addEventListener('mousemove', function (e) {
cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
マウスが動くたびにマウスの座標を取得し、transformプロパティの数値に指定して、オリジナルカーソルにスタイル指定します。
これによってドットがマウス移動に合わせて追従してきます。
// リンクにホバーした時にクラス追加、離れたらクラス削除
var link = document.querySelectorAll('a');
for (var i = 0; i < link.length; i++) {
link[i].addEventListener('mouseover', function (e) {
cursor.classList.add('cursor--hover');
});
link[i].addEventListener('mouseout', function (e) {
cursor.classList.remove('cursor--hover');
});
}
aタグにホバーした時の記述です。
aタグにホバーしている時はcursorにcursor--hoverクラスを追加し、ホバーしていない時は削除します。
以上、初心者向けのマウスカーソルの見た目を変える方法の解説でした！
他のサイトで紹介されているマウスカーソルを変更するコードはハイレベルなものが多いので、わかりやすいように限りなくシンプルにしました。
もっとおしゃれにしたい！という方はこの記事で紹介したコードを応用してチャレンジしてみてください。
もちろん当ブログでも今後、よりリッチなマウスカーソルの実装方法をご紹介していく予定です！
こちらの記事もおすすめ
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/