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
- 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
---
<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
import 'aos/dist/aos.css'; // [!code ++]
---
<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 ++]
import AOS from "aos"; // [!code ++]
AOS.init(); // [!code ++]
</script> // [!code ++]
</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.
