Custom cursor starts in top left of page when page reloaded-CodePudding

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 ></div>
<div >
</div>

CodePudding user response：

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 ></div>
<div ></div>

CodePudding user response：

The function that positions the custom cursor only runs on mousemove, you need to run it on load as well, like so:

window.addEventListener('DOMContentLoaded', cursor);
window.addEventListener('mousemove', cursor);