Question 36389 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Custom cursor starts in top left of page when page reloaded – Jquery

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>
Tags:

2

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search