I'm making a game where a gif is following the cursor. Is there any way to reduce the speed so that the image that follows the cursor moves at a constant (but slower) speed than the cursor itself?
Basically right now the gif I assigned is acting link a replacement cursor. I want the gif to follow and catch up to the cursor at its own speed.
Thanks
<script>
document.querySelector(".testsite").onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
e.target.style.setProperty("--x", `${x}px`);
e.target.style.setProperty("--y", `${y}px`);
};
</script><style>
body {
justify-content: center;
align-items: center;
min-height: 100vh;
}
.testsite {
/* container */
width: 500px;
height: 500px;
position: relative;
appearance: none;
background: grey;
padding: 10px 20px;
border: none;
color: white;
font-size: 1.2em;
cursor: none;
outline: none;
overflow: hidden;
border-radius: 10px;
box-shadow: black;
}
.testsite span {
position: relative;
pointer-events: none;
}
.testsite::before {
--size: 0;
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 32px;
height: 32px;
background-image: url("html5.gif");
animation-duration: 1s;
transform: translate(-50%, -50%);
}
</style><html>
<body>
<div class="testsite">
</div>
</body>
</html>You can make the x and y coordinate operations of your js into a function and then add a setTimeout to that function to run it every 100ms or how ever long you want the delay to be. Check it out here, note I also removed pointer:none; from .testsite :
document.querySelector(".testsite").onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
function runInt() {
e.target.style.setProperty("--x", `${x}px`);
e.target.style.setProperty("--y", `${y}px`);
}
setTimeout(runInt, 100);
};body {
justify-content: center;
align-items: center;
min-height: 100vh;
}
.testsite {
/* container */
width: 500px;
height: 500px;
position: relative;
appearance: none;
background: grey;
padding: 10px 20px;
border: none;
color: white;
font-size: 1.2em;
outline: none;
overflow: hidden;
border-radius: 10px;
box-shadow: black;
}
.testsite span {
position: relative;
pointer-events: none;
}
.testsite::before {
--size: 0;
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 32px;
height: 32px;
background-image: url("https://www.springbrookanimalcarecenter.com/blog/wp-content/uploads/2017/10/Springbrook_iStock-612247460-150x150.jpg");
animation-duration: 1s;
transform: translate(-50%, -50%);
}<html>
<body>
<div class="testsite">
</div>
</body>
</html>