Uso de Animate On Scroll (AOS) en Astro: una guía paso a paso

Using Animate On Scroll (AOS) in Astro: A Step-by-Step Guide

En esta guía, aprenderá cómo usar Animate On Scroll (AOS) en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar el módulo aos y agregar una animación gradual a un encabezado.

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior

Tabla de contenido

Crear una nueva aplicación Astro
Integre Animate On Scroll (AOS) en su proyecto Astro
- Instalar SDK de Animate On Scroll (AOS)
- Usar AOS en la ruta de índice
[Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

Empty cuando se le pregunta cómo iniciar el nuevo proyecto
Sí cuando se le pregunte si planea escribir Typecript
Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
Sí cuando se le solicita instalar dependencias
Sí cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

Ahora, pasemos a integrar AOS en su aplicación Astro.

Integre Animate On Scroll (AOS) en su proyecto Astro

Instalar el SDK de Animate On Scroll (AOS)

Ejecute el siguiente comando para instalar el paquete necesario para usar AOS:

npm install aos

Instala lo siguiente:

aos: una biblioteca animada en desplazamiento

Utilice AOS en la ruta de índice

Para demostrar el uso de AOS, agregará un desvanecimiento en la animación a un texto.

Realice las siguientes adiciones en el archivo src/pages/indexastro:

---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1 data-aos="fade-in" data-aos-delay="300">Astro</h1>
  </body>
</html>

Observe que ha utilizado dos atributos específicos de AOS aquí:

data-aos: para especificar el tipo de animación deseada
data-aos-delay: para especificar el tiempo que debe durar la animación

Opcionalmente, lea más sobre atributos de AOS

Entonces ahora podrá ver un encabezado llamado Astro. Importemos el módulo aos en la ruta de índice mediante las siguientes adiciones:

---
// File: src/pages/index.astro // [!code focus]

import 'aos/dist/aos.css'; // [!code ++] // [!code focus]
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1 data-aos="fade-in" data-aos-delay="300">Astro</h1>
    <script> // [!code ++] // [!code focus]
      import AOS from "aos"; // [!code ++] // [!code focus]
      AOS.init(); // [!code ++] // [!code focus]
    </script> // [!code ++] // [!code focus]
  </body>
</html>

¡y listo!

En las adiciones anteriores, importó el CSS requerido por la biblioteca AOS e inició la instancia de AOS en el lado del cliente (en el navegador).

Cree y pruebe su aplicación Astro localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

npm run build && npm run preview

Conclusión

En esta guía, aprendiste cómo usar Animate On Scroll (AOS) en una aplicación Astro.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter