Verwendung von Animate On Scroll (AOS) in Astro: Eine Schritt-für-Schritt-Anleitung

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

LaunchFast Logo LaunchFast

Verwendung von Animate On Scroll (AOS) in Astro: Eine Schritt-für-Schritt-Anleitung

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

In dieser Anleitung erfahren Sie, wie Sie Animate On Scroll (AOS) in einer Astro-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation des AOS-Moduls und des Hinzufügens einer Einblendanimation zu einer Überschrift

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Inhaltsverzeichnis

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

Terminal window
npm create astro@latest my-app

„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

  • „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
  • „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
  • „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
  • „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren – „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

Terminal window
cd my-app
npm run dev

Die App sollte auf localhost:4321 ausgeführt werden.

Kommen wir nun zur Integration von AOS in Ihre Astro-Anwendung

Integrieren Sie Animate On Scroll (AOS) in Ihr Astro-Projekt

Installieren Sie das Animate On Scroll (AOS) SDK

Führen Sie den folgenden Befehl aus, um das für die Verwendung von AOS erforderliche Paket zu installieren:

Terminal window
npm install aos

Es installiert Folgendes:

  • „aos“: Eine animierte Scroll-Bibliothek

Verwenden Sie AOS in der Indexroute

Um die Verwendung von AOS zu demonstrieren, fügen Sie einem Text eine Einblendanimation hinzu

Nehmen Sie die folgenden Ergänzungen in der Datei „src/pages/indexastro“ vor:

---
// 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>

Beachten Sie, dass Sie hier zwei AOS-spezifische Attribute verwendet haben:

  • „data-aos“: um die Art der gewünschten Animation anzugeben
  • „data-aos-delay“: um die Zeit anzugeben, die die Animation dauern soll

Lesen Sie optional mehr über AOS-Attribute

Sie können nun also eine Überschrift mit dem Namen „Astro“ sehen. Importieren wir das Modul „aos“ über die folgenden Zusätze in die Indexroute:

---
// 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>

und du bist fertig!

In den oben genannten Ergänzungen haben Sie die erforderliche CSS-by-AOS-Bibliothek importiert und die AOS-Instanz auf der Clientseite (im Browser) initiiert.

Erstellen und testen Sie Ihre Astro-Anwendung lokal

Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:

Terminal window
npm run build && npm run preview

Abschluss

In dieser Anleitung haben Sie gelernt, wie Sie Animate On Scroll (AOS) in einer Astro-Anwendung verwenden

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024