Custom cursor largué par le scrolling

Default
,

Bonjour,

Je débute en frontend et j'essaye depuis quelques jours déjà de customiser mon curseur mais je fais face à un problème que je n'arrive pas à résoudre.
Voilà ce que je fais en JS :

let mouseCursor = document.querySelector(".cursor"); 
let hasLinks = document.querySelectorAll(".haslink"); 

window.addEventListener('mousemove',cursor);

function cursor(e){
  mouseCursor.style.top = e.pageY + 'px';
  mouseCursor.style.left = e.pageX + 'px';
}

hasLinks.forEach(link =>{
  link.addEventListener('mouseleave', () => {
    mouseCursor.classList.remove('linkCursorPulse');
  });
  link.addEventListener('mouseover', () => {
    mouseCursor.classList.add('linkCursorPulse');
  });
});

avec en CSS :

body{
    cursor: none;
}

.cursor{
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    background-color: #666;
    opacity: 0.6;
    border-radius: 50%; 
    position: relative; 
    pointer-events: none;
    margin-top: -1rem;
    margin-left: -1rem;
}

.linkCursorPulse{
    transform: scale(1);
    background: #666;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
      height: 2rem;
      width: 2rem;
      margin-top: -1rem;
      margin-left: -1rem;
    }
    50% {

      height: 1rem;
      width: 1rem;
      margin-top: -0.5rem;
      margin-left: -0.5rem;
    }
    100% {
        height: 2rem;
        width: 2rem;
        margin-top: -1rem;
        margin-left: -1rem;
    }
  }

et en HTML :

<body id="hautdepage">
    <div class="cursor"></div>
        <header>
            <a class = "haslink" href="#hautdepage"> 
                <h1 > Titre </h1>
            </a> 
      </header>    
</body>

J'obtiens le résultat souhaité quand je bouge ma souris, mais lorsque je scroll mon curseur ne bouge pas, il retrouve sa place dès que je remets la souris en mouvement. Enfin je dis le résultat souhaité... j'ai un autre problème qui est que lorsque mon curseur pulse, toute la page pulse avec lui ... Si jamais vous avez un indice à ce sujet également :)

Merci d'avance

1 Réponse

Default
,

Another option for investors is an online trading course called Certus Trading Reviews.

https://thriveglobal.com/stories/qa-with-founder-chief-strategist-of-certus-trading-matt-choi/