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

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

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

Rishi Raj Jain
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.

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Requisitos previos

Necesitará lo siguiente:

Tabla de contenido

Crea una nueva aplicación Astro

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

Terminal window
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
  • cuando se le pregunte si planea escribir Typecript
  • Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
  • cuando se le solicita instalar dependencias
  • cuando se le solicita inicializar un repositorio de git

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

Terminal window
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:

Terminal window
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:

Terminal window
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

Learn More Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024