Comment créer un cercle qui suit le curseur en utilisant du javascript et css

Dans certains modes de thème sombre, un grand curseur aide vraiment à identifier différents éléments sur une page.

Vous pouvez également différencier l'élément avec une couleur différente lorsque le curseur se trouve sur un élément spécifique, ce que vous pouvez également faire avec un curseur normal. L'objectif final est d'élargir la zone du curseur.

Allons-y

HTML

<div class='cursor' id="cursor"></div>

CSS

Faites attention à la propriété mix-blend-mode. La valeur est définie sur différence, ce qui est utile pour les modes sombre et clair.

.cursor {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  mix-blend-mode: difference;
  background-color: white;
  z-index: 10000;
  border: 2px solid white;
  height: 30px;
  width: 30px;
  transition: all 300ms ease-out;
}

Javascript

Maintenant, ajoutons un écouteur d'événement sur body lui-même qui gardera une trace de la position du curseur et sur cette base, il ajustera la position du cercle.

var cursor = document.getElementById("cursor");
document.body.addEventListener("mousemove", function(e) {
  cursor.style.left = e.clientX + "px",
    cursor.style.top = e.clientY + "px";
});