Looking for some help with a custom cursor. It’s all working fine except for when you scroll, the custom cursor stays where it is on the page until you move the mouse again and then it catches up. So I need to make the custom cursor stick to the position of the default cursor at all times.
Thanks in advance!
const queryCursor = document.querySelector(".cursor");
var cursor = {
delay: 8,
_x: 0,
_y: 0,
endX: window.innerWidth / 2,
endY: window.innerHeight / 2,
cursorVisible: true,
cursorEnlarged: false,
$cursor: queryCursor,
init: function () {
this.outlineSize = this.$cursor.offsetWidth;
this.setupEventListeners();
this.animateDotOutline();
},
setupEventListeners: function () {
var self = this;
// On Hover Active
document.querySelectorAll("a, img, .elementor-custom-embed-image-overlay, button").forEach(function (el) {
el.addEventListener("mouseover", function () {
self.cursorEnlarged = true;
queryCursor.classList.add("active");
});
el.addEventListener("mouseout", function () {
self.cursorEnlarged = false;
queryCursor.classList.remove("active");
});
});
// On Hover Disappears
document.querySelectorAll("input, textarea, iframe, video, .footer").forEach(function (el) {
el.addEventListener("mouseover", function () {
self.cursorEnlarged = true;
queryCursor.classList.add("hidden");
});
el.addEventListener("mouseout", function () {
self.cursorEnlarged = false;
queryCursor.classList.remove("hidden");
});
});
document.addEventListener("mousemove", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.endX = e.pageX;
self.endY = e.pageY;
});
document.addEventListener("mouseenter", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$cursor.style.opacity = 1;
});
document.addEventListener("mouseleave", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$cursor.style.opacity = 0;
});
},
animateDotOutline: function () {
var self = this;
self._x += (self.endX - self._x) / self.delay;
self._y += (self.endY - self._y) / self.delay;
self.$cursor.style.top = self._y + "px";
self.$cursor.style.left = self._x + "px";
requestAnimationFrame(this.animateDotOutline.bind(self));
},
toggleCursorVisibility: function () {
var self = this;
if (self.cursorVisible) {
self.$cursor.style.opacity = 1;
} else {
self.$cursor.style.opacity = 0;
}
}
};
cursor.init();
.cursor {
z-index: 1000;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s, width 0.3s, height 0.3s;
width: 20px;
height: 20px;
background-color: #EBF602;
display: flex;
align-items: center;
justify-content: center;
}
.cursor.active {
transform: translate(-50%, -50%) scale(2);
opacity:0.7 !important;
}
.cursor.hidden {
opacity: 0 !important;
}
section{
min-height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<section></section>
<section></section>