Añadir documentación sobre uso de AOS en páginas turísticas

[julianperuzzi]

Esta contribución agrega un nuevo archivo de documentación titulado paginas-turisticas.md en la carpeta docs. El archivo explica la importancia del uso de animaciones en sitios turísticos, proporciona soluciones para evitar conflictos con otras animaciones CSS, y describe buenas prácticas para su implementación.

Contribución al proyecto AOS: Documentación de buenas prácticas para su uso en páginas turísticas

1. Introducción al Proyecto AOS
   AOS (Animate on Scroll) es una biblioteca JavaScript que permite animar elementos a medida que el usuario se desplaza por la página. Es especialmente útil para crear una experiencia visualmente atractiva en sitios web que dependen mucho del diseño dinámico, como las páginas de destinos turísticos. Estas animaciones mejoran la interactividad del sitio y mantienen la atención del usuario.

2. Importancia del uso de AOS en páginas turísticas
   En sitios turísticos, las animaciones juegan un rol crucial para destacar ciertos elementos visuales como:

Imágenes de destinos: Las fotos de paisajes o lugares de interés pueden captar más la atención si se les aplica un efecto animado que las haga aparecer progresivamente en pantalla mientras el usuario hace scroll.
Información sobre actividades y servicios: Las descripciones de las actividades disponibles en un lugar turístico se pueden presentar de forma más atractiva cuando se utilizan animaciones sutiles.
Enlaces a servicios y contactos: Los botones o enlaces a reservas, redes sociales, o prestadores de servicios pueden destacarse mediante animaciones que capturen la atención del usuario sin sobrecargar el diseño.
Un ejemplo específico sería en una página web de promoción de un dique o reserva natural, donde los efectos de aparición pueden utilizarse para mostrar información clave mientras el usuario navega entre secciones como: actividades acuáticas, mapas de la zona, paradores y servicios disponibles.

3. Limitaciones y consideraciones al usar AOS con otros efectos de animación
   Uno de los desafíos que se presentan al integrar AOS con otros efectos CSS, como hover:scale, es que ambos estilos pueden entrar en conflicto si no se aplican correctamente. Esto sucede cuando un mismo elemento tiene múltiples animaciones aplicadas al mismo tiempo, lo que puede causar efectos no deseados como superposiciones o animaciones no fluidas.

Problema
Cuando se aplica AOS a un elemento, este realiza una animación que depende del scroll. Al combinarlo con efectos de transición, como un cambio de escala (scale) en el hover, es probable que las animaciones interfieran entre sí. Esto puede dar como resultado animaciones que se ven interrumpidas o con problemas de rendimiento.

Solución: Uso de contenedores
Para evitar estos conflictos, es importante utilizar un contenedor padre para los elementos animados. De esta manera, puedes aplicar la animación de AOS al contenedor y los efectos de transición (como scale) directamente al elemento hijo. Esto asegura que las animaciones se ejecuten de manera independiente y sin interferencias.

Ejemplo de implementación correcta:
html

En este ejemplo:

El contenedor

con la clase aos-container gestiona la animación de scroll (fade-up).
El elemento hijo

maneja el efecto hover:scale y otras transiciones de estilo CSS.
4. Buenas prácticas al integrar AOS en proyectos turísticos
Uso moderado de animaciones: En una página turística, es crucial que las animaciones no distraigan del contenido principal. AOS permite ajustar la duración, el retardo y la intensidad de las animaciones, lo que ayuda a controlar el flujo visual.

Consejo: Utiliza las propiedades duration, delay, y easing de AOS para suavizar la experiencia del usuario.

html

Descubre nuestras actividades

Compatibilidad móvil: Las animaciones pueden verse afectadas por el tamaño de la pantalla o el rendimiento en dispositivos móviles. Asegúrate de probar las animaciones en diferentes resoluciones y, si es necesario, desactiva AOS para pantallas pequeñas.

css

@media (max-width: 768px) {
[data-aos] {
opacity: 1;
transform: none;
transition: none;
}
}
Uso de contenedores para animaciones complejas: Como se mencionó anteriormente, para evitar conflictos entre efectos CSS y AOS, organiza los elementos animados en contenedores para separarlos visual y funcionalmente.

Optimización de rendimiento: Las animaciones excesivas pueden afectar el rendimiento de la página. Es recomendable usar once: true en las propiedades de AOS para que las animaciones solo se ejecuten la primera vez que aparecen en pantalla.

html

Explora el dique y disfruta de actividades únicas