Inverser la couleur du texte au survol de la souris à l'aide de CSS et JavaScript

Pour obtenir l'effet de survol souhaité, où le texte noir s'inverse en blanc tout en conservant la Avec l'apparition d'un curseur noir, nous pouvons combiner les capacités des chemins de clips CSS avec la gestion des événements JavaScript.

L'approche consiste à créer deux couches de texte : la couche de texte principale et une couche de texte inversée. Le calque de texte inversé est positionné derrière le calque de texte principal et sa couleur de texte est définie sur blanc.

À l'aide de JavaScript, nous capturons le mouvement de la souris et ajustons dynamiquement le chemin de détourage du calque de texte inversé. Au fur et à mesure que la souris se déplace, le chemin du clip est ajusté pour révéler davantage de texte inversé, créant l'illusion du texte principal inversant sa couleur.

Voici une répartition des composants clés du code :

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

Exemple de code :

WORK

Résultat :

Lorsque vous survolez le texte "WORK", le texte noir passera progressivement au blanc lorsque le curseur de la souris se déplace.