Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
julianperuzzi wants to merge 1 commit into
base: next
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/paginas-turisticas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Uso de AOS en Páginas Turísticas

## Importancia de las Animaciones en Sitios Turísticos

Las animaciones son un recurso clave en el diseño de sitios turísticos, ya que captan la atención del usuario y mejoran su experiencia de navegación. **AOS** (Animate On Scroll) ofrece una forma sencilla y eficiente de añadir efectos de entrada y salida a los elementos mientras el usuario recorre la página.

En sitios turísticos, estas animaciones pueden ser utilizadas para:
- Mostrar información clave sobre actividades y destinos.
- Resaltar imágenes de alta calidad y recursos visuales.
- Aumentar la interacción con elementos como formularios o enlaces de contacto.

## Problemas y Soluciones con Animaciones Combinadas

Un aspecto importante a tener en cuenta al utilizar **AOS** en combinación con otras animaciones CSS (como `hover:scale`) es que pueden producirse conflictos. Esto sucede porque ambos tipos de animaciones intentan modificar las propiedades del mismo elemento, causando efectos no deseados.

### Solución

Para evitar estos problemas, es recomendable envolver los elementos que tengan animaciones combinadas dentro de un contenedor. El contenedor se encargará de la animación de desplazamiento (**AOS**), mientras que el elemento interior manejará las animaciones de hover u otros efectos CSS. Aquí un ejemplo:

<div data-aos="fade-up" class="container">
<div class="inner-element hover:scale">
<!-- Contenido aquí -->
</div>
</div>