I am using a custom cursor which is working fine, but when the page loads the custom mouse cursor starts in the top left corner until the user moves the mouse and then it jumps to where it iss supposed to be. How can I make it start where the cursor actually is? Code snippet and Codepen below. Thanks in advance!
See Codepen
let mouseCursor = document.querySelector(".cursor");
let Links = document.querySelectorAll("a");
let iframes = document.querySelectorAll("iframe");
let logo = document.querySelector(".logo-error");
window.addEventListener('DOMContentLoaded', cursor);
window.addEventListener('mousemove', cursor);
function cursor(e){
mouseCursor.style.top = "calc(" +e.pageY + "px - 1rem)";
mouseCursor.style.left = "calc(" +e.pageX + "px - 1rem)";
}
Links.forEach(link =>{
if ( link !== logo ){
link.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("link-grow");
});
link.addEventListener("mouseover", () => {
mouseCursor.classList.add("link-grow");
});
}
});
iframes.forEach(frame =>{
frame.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("hide");
});
frame.addEventListener("mouseover", () => {
mouseCursor.classList.add("hide");
});
});body{
cursor: none;
}
.main{
width: 100%;
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a{
font-size: 40px;
color: white;
}
.cursor{
width: 2rem;
height: 2rem;
border: 2px solid white;
border-radius: 50%;
position: absolute;
transition: all 0.3s ease;
transition-property: background, transform;
transform-origin: center center;
z-index: 20000;
pointer-events: none;
}
.link-grow{
transform: scale(1.2);
background: white;
mix-blend-mode: difference;
}
a:-webkit-any-link {
cursor: none;
}
.logo-error:hover .cursor{
display: none !important;
}
.hide {
display: none !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<div class="main">
</div>
>Solution :
To make the #cursor element appear/disappear when the real cursor enters/leaves the window, add some mouseenter/mouseleave event handlers to the document which hide/show #cursor. It would also be a good idea to have the initial state of #cursor set to display: none in CSS.
document.addEventListener('mouseenter', () => mouseCursor.style.display = 'block');
document.addEventListener('mouseleave', () => mouseCursor.style.display = 'none');
Here’s a working example:
let mouseCursor = document.querySelector(".cursor");
let Links = document.querySelectorAll("a");
let iframes = document.querySelectorAll("iframe");
let logo = document.querySelector(".logo-error");
window.addEventListener('DOMContentLoaded', cursor);
window.addEventListener('mousemove', cursor);
document.addEventListener('mouseenter', () => mouseCursor.style.display = 'block');
document.addEventListener('mouseleave', () => mouseCursor.style.display = 'none');
function cursor(e) {
mouseCursor.style.top = "calc(" + e.pageY + "px - 1rem)";
mouseCursor.style.left = "calc(" + e.pageX + "px - 1rem)";
}
Links.forEach(link => {
if (link !== logo) {
link.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("link-grow");
});
link.addEventListener("mouseover", () => {
mouseCursor.classList.add("link-grow");
});
}
});
iframes.forEach(frame => {
frame.addEventListener("mouseleave", () => {
mouseCursor.classList.remove("hide");
});
frame.addEventListener("mouseover", () => {
mouseCursor.classList.add("hide");
});
});body {
cursor: none;
}
.main {
width: 100%;
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
font-size: 40px;
color: white;
}
.cursor {
width: 2rem;
height: 2rem;
border: 2px solid white;
border-radius: 50%;
position: absolute;
transition: all 0.3s ease;
transition-property: background, transform;
transform-origin: center center;
z-index: 20000;
pointer-events: none;
display: none;
}
.link-grow {
transform: scale(1.2);
background: white;
mix-blend-mode: difference;
}
a:-webkit-any-link {
cursor: none;
}
.logo-error:hover .cursor {
display: none !important;
}
.hide {
display: none !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<div class="main"></div>