実装の考え方
リンクをホバーしたかを判断するために、JavaScriptのmouseenterとmouseleaveイベントを利用します。mouseenterでリンク内に入ったら、scaleプロパティで大きくなるようにします。mouseleaveでリンク外に出たら、scaleプロパティを1にし、元の大きさに戻します。
リンクをホバーした際のマウスストーカーの色は、HTML内のリンクにdata属性(data-color)を付与して色を管理しホバーしたらその色に変化するようにします。
マウスストーカー自体の解説はしないので、基本的なマウスストーカーの実装方法を知りたい方は下記を確認してください
実装方法
それでは実際に実装していきましょう。
まずはHTMLになります。
HTML
<div class="container">
<div class="grid">
<ul class="links">
<li><a href="#" data-color="green">緑リンク01</a></li>
</ul>
<!-- リンク続く -->
</div>
<div class="mouse-cursor"></div>
</div>
前回同様にマウスストーカーは、mouse-cursorというクラスを付与して作成します。
また先述の通り、リンクをホバーした際のマウスストーカーの色は、HTML内のリンクにdata属性(data-color)を付与しています。
今回のデモでは、green,blue,yellow,orangeの4色を用意しています。
CSS
マウスストーカーに関係があるCSSは下記のようになります。
:root {
--green: #53C197;
--blue: #7A9AC9;
--yellow: #F3E84D;
--orange: #F0A15E;
}
.mouse-cursor {
--mouse-cursor-color: #000;
position: fixed;
top: 0;
left: 0;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
opacity: 0.8;
background-color: var(--mouse-cursor-color);
pointer-events: none;
translate: -50% -50%;
transition-property: background-color, scale;
transition-duration: 0.3s;
}
ホバーした際の色は4色必要なので、rootに変数を定義しておきます。マウスストーカーの色は--mouse-cursor-colorという変数で管理します。
マウスストーカーのCSSは前回と変更しています。その理由として、scaleで大きくした際に中心から大きくなるようにしたいため、初期状態ではtranslate: -50% -50%として位置しており、JavaScriptではtopとleftを変更することでマウスストーカーの位置を更新します。
急な変化にならないように、transition-propertyでbackground-colorとscaleを指定しておくのを忘れないようにしましょう。
JavaScript
最後にJavaScriptになります。前回のマウスストーカーと実装が異なるので、マウスストーカー部分のコードを見ていきましょう。
マウスストーカーの実装
const mouseCursor = document.querySelector('.mouse-cursor');
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
mouseCursor.style.left = `${mouseX}px`;
mouseCursor.style.top = `${mouseY}px`;
});
先述の通りに、scaleで大きくした際に、中心から大きくするため、leftとtopを変更することでマウスストーカーの位置を更新します。続いて、リンクをホバーした際のコードを実装しましょう。
リンクをホバーしたら、色と大きさを変更する
const links = document.querySelectorAll('a');
links.forEach(link => {
// リンク内にマウスが入った時の処理
link.addEventListener('mouseenter', () => {
const color = link.dataset.color;
mouseCursor.style.setProperty('--mouse-cursor-color', `var(--${color})`);
mouseCursor.style.scale = '2';
});
// リンクからマウスが離れた時の処理
link.addEventListener('mouseleave', () => {
mouseCursor.style.setProperty('--mouse-cursor-color', '#000');
mouseCursor.style.scale = '1';
});
});
ここでは簡易的に、aタグを全て取得しています。取得したリンクをforEachで回して、それぞれmouseenterだったらリンク内に入った処理、mouseleaveだったらリンクから出た処理を記述しています。
mouseenterの場合は、link.dataset.colorでリンクのデータ属性から色を取得し、mouseCursor.style.setPropertyでマウスストーカーの色(--mouse-cursor-color)を変更しています。そして、mouseCursor.style.scaleでマウスストーカーの大きさを2倍にしています。
mouseleaveの場合は、マウスストーカーの色と大きさを元に戻しています。