マウスについて
Q&A
Closed
みなさんは、どのようなマウスを使われていますか？
0
3Answer
This answer has been deleted for violation of our Terms of Service.
意図の分からない質問文の変更はしないでください.編集履歴は残ります.やむを得ない事情の場合は運営に対応してもらってください.
0Like
マウスストーカーが逆に離れてしまう
解決したいこと
他の方々からのアドバイスを元にして、マウスストーカー作ったのですが、マウスを追わずに、逆に離れてしまいます。解決方法を教えてください。<(_ _)>
該当するソースコード
<div class="hero_body">
<div id="hero">
<img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
</div>
</div>
.hero_body {
margin: 20px;
/* overflow: hidden; */
position: relative;
height: 200vh;
width: 100%;
background-color: #e97d7d;
}
.space {
height: 100vh;
background-color: blue;
}
#hero {
width: 100vw;
height: 120vh;
background-color: rgb(129, 125, 236);
margin-top: 0;
position: relative;
}
.illustration {
position: absolute;
pointer-events: none;
will-change: transform;
z-index: 5;
display: none;
}
.active {
display: block;
}
let mouseX = window.innerWidth;
let mouseY = window.innerHeight;
let illustrationX = mouseX;
let illustrationY = mouseY;
const illustration = document.querySelector(".illustration");
illustration.onload = function () {
illustrationX = mouseX;
illustrationY = mouseY;
};
// 遅延付きでイラストの位置を更新★
function updateIllustration() {
var dx = mouseX - illustrationX;
var dy = mouseY - illustrationY;
var delayFactor = 0.01;
illustrationX += dx * delayFactor;
illustrationY += dy * delayFactor;
illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)';
requestAnimationFrame(updateIllustration);
}
// マウス位置の更新
document.addEventListener('mousemove', onMouseMove);
function onMouseMove(event) {
mouseX = event.pageX;
mouseY = event.pageY;
}
hero.addEventListener('mouseover', () => handlerMouseStoker(true));
hero.addEventListener('mouseout', () => handlerMouseStoker(false));
function handlerMouseStoker(isActive) {
illustration.classList.toggle('active', isActive);
console.log("Is active: " + isActive);
}
0Like