7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. JavaScript

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

Read Time: 6 mins

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:

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:
El primer cursor personalizado
  • Conforme el mouse se mueva sobre las imágenes, otro cursor personalizado sustituirá al inicial:
El segundo cursor personalizado
  • A medida que el mouse se mueva sobre los enlaces del copyright, el primer cursor JavaScript personalizado aparecerá a mayor tamaño:
El primer cursor a mayor escala

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.

Los archivos CSS opcionalesLos archivos CSS opcionalesLos archivos CSS opcionales
El plugin GSAP requeridoEl plugin GSAP requeridoEl plugin GSAP requerido

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:

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:

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():

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

  1. Detectaremos el elemento sobre el que está el cursor.
  2. 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.
  3. 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.
  4. 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

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():

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

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.