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.
Nuestro efecto hover del cursor con JavaScript
Esto es lo que vamos a conseguir al crear estos efectos para el puntero del mouse:
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
yleft
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()
:
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()
:
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:
Esperamos que puedas aplicar los efectos para el puntero del mouse que has aprendido aquí en alguno de tus proyectos. Basándote en lo que acabamos de crear, avanza y construye algo incluso más creativo añadiendo interesantes efectos CSS como la propiedad he mix-blend-mode. O mejora este código para limitar el efecto solo a los dispositivos que no admitan gestos táctiles o/y a pantallas con una anchura mayor a una determinada.
Como siempre, ¡Muchas gracias por leernos!
Más efectos hover y tutoriales de JavaScript
- Un rápido efecto de flotador en pantalla completa con CSS y JavaScriptGeorge Martsoukos29 Jul 2019
- Cómo hacer escuchar múltiples miniaturas con eventos del ratón JavaScriptGeorge Martsoukos26 Mar 2018
- ¿Cómo hacer un Efecto Hover de Subrayado Movedizo con CSS y JavaScript?George Martsoukos28 Mar 2017