Construir un efecto hover con eventos del mouse en Java y GSAP

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial de JavaScript, trabajaremos con dos eventos de cursor en JavaScript y GSAP para construir un creativo efecto que probablemente hayas visto ya en algún sitio web: un cursor personalizado que sigue el nativo y que adapta su apariencia dependiendo del elemento sobre el que esté situado.

Este tutorial de JavaScript asume que ya estás algo familiarizado con GSAP. Si todavía no conoces esta biblioteca, te animo a que consultes algunos de los recursos disponibles aquí en Tuts+.

Nuestro efecto hover del cursor con JavaScript

Esto es lo que vamos a conseguir al crear estos efectos para el puntero del mouse:

Please accept marketing cookies to load this content.

Presta especial atención a las siguientes cosas de estos eventos del mouse en Java:

Conforme el mouse se mueva sobre la página, un cursor JavaScript personalizado seguirá al nativo:

Conforme el mouse se mueva sobre las imágenes, otro cursor personalizado sustituirá al inicial:

A medida que el mouse se mueva sobre los enlaces del copyright, el primer cursor JavaScript personalizado aparecerá a mayor tamaño:

1. Incluye los recursos requeridos para los eventos del mouse

Como ya hemos debatido, para crear los efectos para el cursor, vamos a usar GSAP.

Recuerda que GSAP no es la única opción para crear estos efectos para el puntero del mouse. Puedes conseguirlo también con JavaScript puro o utilizando otra librería JavaScript para animaciones, por ejemplo, Anime.js.

Para este tutorial de JavaScript he elegido esta librería en lugar de Java puro debido a sus dos potentes herramientas: las funciones para temporizar y una línea de tiempo. Conforme un sitio web evoluciona, mantener todas las animaciones a través de sus líneas de tiempo te ayudará a tener un mayor control sobre tu código.

Opcionalmente, para hacer la página más atractiva y agilizar el proceso de desarrollo, también añadiremos una fuente de Google y Bootstrap 5.

Con esto en mente, si miras bajo la pestaña Ajustes en nuestro pen de demostración, verás que existen dos archivos externos CSS y uno de JavaScript para lograr nuestros eventos del mouse en Java.

2. Define la estructura HTML

La estructura de nuestra página consistirá en tres secciones y dos elementos div.

Más concretamente, tendremos las siguientes secciones:

La sección de introducción
La sección con una retícula de imágenes
La sección con las licencias de copyright

Cada div contendrá un icono que será el responsable de mostrar un cursor personalizado dependiendo del elemento sobre el que este se sitúe. Para mayor flexibilidad, puedes insertar estos iconos en tus proyectos usando una etiqueta svg en lugar de una etiqueta img.

Aquí tienes la estructura de la página:

<section class="intro">...</section>
<section class="image-grid">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4">
        <a class="d-block" href="" target="_blank">
          <img width="640" height="426" src="bee1.jpg" class="shadow img-fluid" alt="">
        </a>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <a class="d-block" href="" target="_blank">
          <img width="640" height="426" src="/bee2.jpg" class="shadow img-fluid" alt="">
        </a>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <a class="d-block" href="" target="_blank">
          <img width="640" height="426" src="bee3.jpg" class="shadow img-fluid" alt="">
        </a>
      </div>
    </div>
  </div>
</section>
<section class="copyright">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-auto">
        <p class="mb-0">Images from <a class="line-animation" href="https://pixabay.com/" target="_blank">Pixabay.com</a></p>
      </div>
      <div class="col-auto">
        <p class="mb-0">SVG icon from <a class="line-animation" href="https://svgsilh.com/" target="_blank">SVG Silh</a></p>
      </div>
      <div class="col-auto">
        <p class="mb-0">Text from <a class="line-animation" href="https://en.wikipedia.org/wiki/Cinque_Terre" target="_blank">Wikipedia</a></p>
      </div>
    </div>
  </div>
</section>

<div class="cursor cursor-bee">
  <img width="30" height="26" src="cursor-bee.svg" alt="">
</div>
<div class="cursor cursor-eye">
  <img width="60" height="60" src="cursor-eye.svg" alt="">
</div>

3. Especifica los principales estilos para los eventos del mouse en Java

En este tutorial JavaScript nos vamos a concentrar ahora en los estilos de los efectos para el cursor en CSS, ya que son los que importan.

Aquí tienes algunas cosas importantes para crear nuestros eventos del mouse en Java:

Los cursores estarán posicionados de forma fija.
Estableceremos en concordancia los valores de sus propiedades top y left de manera que el cursor nativo o estándar aparezca en el centro de los personalizados.
Les asignaremos la propiedad pointer-events: none para deshabilitar las interacciones de los mismos.
El cursor en forma de abeja siempre estará bajo los elementos de la página, mientras que el cursor en forma de ojo estará situado sobre ellos.
Ambos cursores estarán inicialmente ocultos.

Aquí tienes los estilos asociados:

/*CUSTOM VARIABLES HERE*/

.cursor {
  position: fixed;
  pointer-events: none;
  opacity: 0;
}

.cursor-bee {
  top: -15px;
  left: -13px;
  z-index: -1;
}

.cursor-eye {
  top: -50px;
  left: -50px;
  padding: 20px;
  z-index: 1;
  border-radius: 50%;
  background-color: var(--darkblue);
}

4. Añade el JavaScript para los efectos del puntero del mouse

Añadamos ahora GSAP al juego. Conforme movemos el cursor dentro de la página, se disparará la devolución de llamada mousemoveHandler():

1	document.addEventListener("mousemove", mousemoveHandler);

Dentro de esta función, iniciaremos una línea del tiempo y después ejecutaremos las siguientes acciones:

Detectaremos el elemento sobre el que está el cursor.
Definiremos algunas propiedades predeterminadas que todos los cursores personalizados heredarán. Más concretamente, cogeremos las coordenadas X e Y del cursor del mouse relativas a la ventana de visualización y pasaremos sus valores a los elementos de destino correspondientes. Además, usaremos la misma función de temporizador para todas las animaciones.
Si el elemento sobre el que está el cursor es una imagen dentro de la retícula de imágenes, el efecto hover ocultará el cursor JavaScript en forma de abeja y mostraremos el cursor ojo.
En cualquier otro caso, el efecto hover ocultará el cursor en forma de ojo y al mismo tiempo mostrará la abeja. En este punto, también comprobaremos si el elemento sobre el que está el cursor es alguno de los enlaces dentro de la sección del copyright. Si ocurre esto, cuadruplicaremos el tamaño del cursor.

Aquí tienes el correspondiente código JavaScript para los efectos del puntero del mouse:

const cursorBee = document.querySelector(".cursor-bee");
const cursorEye = document.querySelector(".cursor-eye");
let scale = 1;

function mousemoveHandler(e) {
  // 1
  const target = e.target;
  // 2
  const tl = gsap.timeline({
    defaults: {
      x: e.clientX,
      y: e.clientY,
      ease: "power2.out"
    }
  });

  // 3
  if (
    target.tagName.toLowerCase() === "img" &&
    target.closest(".image-grid")
  ) {
    tl.to(cursorBee, {
      opacity: 0
    }).to(
      cursorEye,
      {
        opacity: 1
      },
      "-=0.5"
    );
  } else {
    // 4
    if (target.classList.contains("line-animation")) {
      scale = 4;
    } else {
      scale = 1;
    }

    tl.to(cursorBee, {
      opacity: 1,
      scale: scale
    }).to(
      cursorEye,
      {
        opacity: 0
      },
      "-=0.5"
    );
  }
}

Nota: dependiendo del tipo de posicionamiento del cursor (por ej. absoluto), podemos coger las coordenadas del puntero del mouse utilizando las propiedades pageX y pageY en lugar de clientX and clientY.

De la misma forma, conforme el cursor deja de moverse alrededor de la página, se disparará la devolución de llamada mouseLeaveHandler():

1	document.addEventListener("mouseleave", mouseleaveHandler);

Dentro de esta función, crearemos un elemento que será el responsable de ocultar el efecto hover del cursor JavaScript en forma de abeja:

...

function mouseleaveHandler() {
  gsap.to(cursorBee, {
    opacity: 0
  });
}

Conclusión

En este tutorial de JavaScript, hemos logrado construir un efecto hover de cursor con JavaScript y GSAP.

Veamos de nuevo los efectos para el puntero del mouse que hemos construido: