Invertir el color del texto al pasar el mouse usando CSS y JavaScript

Para lograr el efecto de desplazamiento deseado, donde el texto negro se invierte en blanco mientras se mantiene el apariencia de un cursor negro, podemos combinar las capacidades de las rutas de clip CSS con el manejo de eventos de JavaScript.

El enfoque consiste en crear dos capas de texto: la capa de texto primaria y una capa de texto invertida. La capa de texto invertido se coloca detrás de la capa de texto principal y su color de texto está establecido en blanco.

Usando JavaScript, capturamos el movimiento del mouse y ajustamos dinámicamente la ruta de clip de la capa de texto invertido. A medida que se mueve el mouse, la ruta del clip se ajusta para revelar más texto invertido, creando la ilusión del texto principal invirtiendo su color.

Aquí hay un desglose de los componentes clave del código:

/* 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');
};

Código de ejemplo:

WORK

Resultado:

Cuando pasas el cursor sobre el texto "TRABAJO", el texto negro pasará gradualmente a blanco a medida que se mueve el cursor del mouse.