見本
詳しくはリンク先を参照説明・補足
ポインタがマウスカーソルに追尾します。aタグにホバーするとポインタがちょっとだけ大きくなります。下記サンプルです。
https://codepen.io/kk1005/pen/ZEJgLRy
(プレビューが動的に出力されてるからかホバー時の動きが確認できなかったため、取り急ぎこんな見た目になるよ程度です。)
HTML
<div class="mouse-stalker">
<div></div>
</div>
CSS
.mouse-stalker {
display: flex;
align-items: center;
justify-content: center;
width: 1px;
height: 1px;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
pointer-events: none;
}
/* ポインタの見た目 */
.mouse-stalker > div {
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(255, 223, 0, 0.4);
flex-shrink: 0;
transition: -webkit-transform ease 0.1s;
transition: transform ease 0.1s;
transition: transform ease 0.1s, -webkit-transform ease 0.1s;
}
/* リンクにホバーした時にポインタを大きくする */
.mouse-stalker div.is-active {
-webkit-transform: scale(2);
transform: scale(2);
}
js
// マウスストーカー要素
var mouseStalker
// マウスストーカー要素の位置
var stalker = {
x: 0,
y: 0
}
// マウスの位置
var mouse = {
x: 0,
y: 0
}
// DOMの解析後に初期化をするためのハンドラ
document.addEventListener('DOMContentLoaded', setup)
// マウスの動きを監視
document.addEventListener('mousemove', mousemove)
// 初期化処理
function setup() {
// マウスストーカー要素を取得
mouseStalker = document.querySelector('.mouse-stalker')
// 更新処理を開始
update()
}
// マウスが動くたびにマウスの位置を保持しておく
function mousemove(e) {
mouse.x = e.clientX
mouse.y = e.clientY
}
// 更新処理
function update() {
// マウスストーカー要素の位置を更新
stalker.x += (mouse.x - stalker.x) * 0.1
stalker.y += (mouse.y - stalker.y) * 0.1
// マウスストーカーの位置を小数点第一位まで四捨五入
var x = Math.round(stalker.x * 10) / 10
var y = Math.round(stalker.y * 10) / 10
// マウスストーカー要素のスタイルを更新
mouseStalker.style.transform = `translate3d(` + x + 'px,' + y + 'px, 0)'
// ループ
requestAnimationFrame(update)
}
//aタグホバー
$("a").hover(
function() {
$('.mouse-stalker div').toggleClass("is-active");
}
);