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

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

Voraussetzungen

Sie benötigen Folgendes:

Nodejs 18 oder höher

Inhaltsverzeichnis

Eine neue Astro-Anwendung erstellen
Animate On Scroll (AOS) in Ihr Astro-Projekt integrieren
- Animate On Scroll (AOS) SDK installieren
- AOS in der Indexroute verwenden
Erstellen und testen Sie Ihre Astro-Anwendung lokal

Erstellen Sie eine neue Astro-Anwendung

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

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:

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:

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:

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.