midudev / la-velada-web-oficial

Web oficial de La Velada IV de Ibai Llanos
https://lavelada.es
Other
1.37k stars 621 forks source link

feat(Gallery, UX): added swipe animation for mobile users #960

Open AlejandroSuero opened 3 months ago

AlejandroSuero commented 3 months ago

Descripción

Se añade soporte para dispositivos táctiles en Gallery.astro para pasar de foto.

Problema solucionado

En dispositivos móviles, tablet o similares, al no aparecer las flechas para pasar de foto, había que cerrar y volver a elegir foto. Con esta PR se añade una manera intuitiva de pasar de foto usando gestos de movimiento touch{start|move|end}.

Cambios propuestos

  1. Añadir clase swipe-element para la imagen que va a ser animada.
  2. Añadir eventListener("touchstart", swipeImage, { passive: true }) con la opción de passive: true para mejorar rendimiento de estos eventos.
  3. Añadir función swipeImage en la cuál se realizará la animación y la lógica para saber si hay que mostrar la siguiente image o la anterior a la actualmente mostrada.
  4. Añadir eventListener("touchmove", ...) y evenListener("thouchend", ...) dentro de la función swipeImage.

Capturas de pantalla (si corresponde)

https://github.com/midudev/la-velada-web-oficial/assets/71392160/41ce5ec5-5921-4b83-b2ed-e607c2e143a0

[!NOTE]

También he probado los cambios en mi dispositivo móvil haciendo uso de pnpm dev --host.

Comprobación de cambios

Impacto potencial

Mejoras de experiencia para usuarios de dispositivos táctiles como móvil, tablet, etc.

Contexto adicional

He probado a no realizar ninguna animación indicativa del swipe pero creo que el usuario llega a entender mejor que movimiento se está realizando si se muestra la imagen deslizándose y desapareciendo conforme se realiza la acción.

Enlaces útiles

vercel[bot] commented 3 months ago

@AlejandroSuero is attempting to deploy a commit to the midudev pro Team on Vercel.

A member of the Team first needs to authorize it.