Cool on Scroll -Animationen, die mit der AOS -Bibliothek einfach gemacht wurden

Als Front-End-Entwickler ist eine beliebte Anfrage, die Sie möglicherweise von Ihren Kunden erhalten, atemberaubende Animationseffekte auf der Seitenrolle implementieren. Es gibt viele Bibliotheken, die uns diese Aufgabe erleichtern. AOS, auch als Animate auf Scroll bezeichnet, ist eine solche Bibliothek und erledigt genau das, was sein Name vorschlägt: Sie können verschiedene Arten von Animationen auf Elemente anwenden, wenn sie in Sichtweise sind.

Hier erfahren Sie die inneren Funktionsweise von AOS, wie Sie die Bibliothek installieren und sie zum Laufen bringen. Am Ende dieses Tutorials wird das Erstellen von Animationen auf Scroll für Ihre Kunden ein Kinderspiel sein.

Key Takeaways

• Die AOS-Bibliothek animieren, die auf Scroll (Scroll) ist, ist ein nützliches Instrument für Front-End-Entwickler, um mühelos On-Scroll-Animationen zu erstellen und eine Reihe von Animationstypen wie Fade, Flip und Dia anzubieten.
• Die AOS -Bibliothek kann mit Bower oder NPM installiert und mit einer einzelnen Codezeile initialisiert werden. Nach der Initialisierung können Animationen angewendet werden, indem HTML -Elemente spezifische Attribute hinzugefügt werden.
• AOS ermöglicht es Entwicklern, Animationen mithilfe von Datenattributen wie Data-AOS-Offset, Daten-AOS-Dauer und Daten-AOS-Erlass zu konfigurieren. Es bietet auch Optionen zum Auslösen von Animationen, die auf der Position anderer Elemente basieren, das Standardverhalten von Animationen ändern und steuern, ob Animationen einmal oder jedes Mal gespielt werden sollten, wenn ein Element in Sichtweise gespielt wird.
• Die AOS -Bibliothek trennt die Logik und Animation für einen saubereren, aufrechterhaltenen Workflow. Es verfolgt Elemente und ihre Positionen und addiert die AOS-Animate-Klasse dynamisch auf der Grundlage der bereitgestellten Einstellungen. Die Bibliothek ermöglicht auch die Erstellung benutzerdefinierter Animationen und bietet Funktionen für die Deaktivierung von Animationen auf bestimmten Geräten oder unter bestimmten Bedingungen.

So installieren Sie die AOS -Bibliothek

Sie können AOS mit Bower oder NPM installieren.

Bower:

bower <span>install aos --save</span>

npm:

<span>npm install aos --save</span>

Link AOS -Stile und -Skripte als nächstes:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

Wenn Sie es vorziehen, können Sie das AOS -Stylesheet- und JavaScript -Dateien mit einem CDN wie folgt herunterladen:

Die CSS:

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>

Das JavaScript:

<span><span><span><script</span> src<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"</span>></span><span><span></script</span>></span></span>

Das ist es, es gibt keine anderen Abhängigkeiten, was dazu beiträgt, die Leistung Ihrer Website unter Kontrolle zu halten.

Um AOS zu initialisieren, schreiben Sie einfach die unten in Ihre JavaScript -Datei.

<span>AOS.init();</span>

Erste Schritte mit AOS

Nach der Initialisierung der Bibliothek müssen Sie nur einige spezifische Attribute hinzufügen.

Um grundlegende Animationen zu verwenden, müssen Sie Ihren HTML-Elementen nur data-aos = "Animation_Name" hinzufügen.

Es gibt verschiedene Arten von Animationen, aus denen Sie auswählen können. Zum Beispiel können Sie Fade-Animationen wie "Fade", "Fade-up" und "Fade-Down-Links" hinzufügen. In ähnlicher Weise können Sie auch Flip- und Dia-Animationen wie "Flip-up", "Flip-Left", "Slide-Down" und "Slide-Light" hinzufügen.

Hier ist das Aufschlag unseres ersten Beispiels:

bower <span>install aos --save</span>

Neben der Initialisierungslinie im vorherigen Abschnitt müssen Sie die Elemente animieren, dass Sie nichts anderes tun.

schauen Sie sich den obigen Code in Aktion an:

Siehe den Stift animieren auf Scroll -Beispielen von SitePoint (@sinepoint) auf CodePen.

Konfigurieren Ihrer Animationen mit AOS -Datenattributen

Lassen Sie uns in die Liste der Datenattribute eintauchen, mit denen Sie Ihre Animationen konfigurieren können.

• data-aos-offset-Mit diesem Attribut können Sie die Animation früher oder später als die angegebene Zeit auslösen. Sein Standardwert beträgt 120px.
• Data-aOS-Duration-Sie können dieses Attribut verwenden, um die Dauer der Animation anzugeben. Der Dauerwert kann zwischen 50 und 3000 mit Schritten von 50 ms liegen. Da die Dauer in CSS behandelt wird, hätte die Verwendung kleinerer Schritte oder einem breiteren Bereich die Größe des CSS -Code unnötig erhöht. Dieser Bereich sollte für fast alle Animationen ausreichen. Der Standardwert für dieses Attribut beträgt 400.
• data-aos-öses-Sie können dieses Attribut verwenden, um die Zeitablauffunktion für die Animation verschiedener Elemente zu steuern. Mögliche Werte sind: linear, leichter und leichter. Sie können eine Liste aller akzeptierten Werte in der Readme -Datei des Projekts auf GitHub sehen.

Hier finden Sie ein Beispiel mit Daten-AOS-Dauer und Daten-AOS-Ease:

Siehe den Stift animieren an Scroll -Beispielen - Attribute von SitePoint (@sitepoint) auf CodePen.

Weitere Datenattribute, die Sie verwenden können, sind:

• data-aos-Anchor-Dieses Attribut ist nützlich, wenn Sie die Animation basierend auf der Position eines anderen Elements auslösen möchten. Es akzeptiert jeden Selektor als Wert. Der Standardwert ist null. Dies bedeutet, dass alle Animationen in Bezug auf die eigene Position des Elements ausgelöst werden.
• Data-aos-Anchor-Placement-Standardmäßig werden die Animationen eines Elements angewendet, sobald sein oberer Teil den unteren Teil des Fensters erreicht. Dieses Verhalten kann mithilfe des Attributs von Data-AOS-Anchor-Placement geändert werden. Als Wert akzeptiert dieses Attribut zwei von einem Bindestrich getrennte Wörter. Sie können es beispielsweise auf Top-Bottom, Top-Center oder Top-Top einstellen. Drei solche Kombinationen sind auch sowohl für die Mittel- als auch für die unteren Werte möglich.
• data-aosonce-Sie können auch steuern, ob die Animationen nur dann abgespielt werden sollten, wenn Sie zum ersten Mal oder jedes Mal, wenn Sie nach oben oder unten scrollen, zu einem bestimmten Element gelangen. Standardmäßig werden die Animationen jedes Mal wiedergegeben, wenn die Elemente in Ansicht scrollen. Sie können den Wert dieses Attributs auf False festlegen, um die Elemente nur einmal zu animieren.

unten finden Sie ein Beispiel für die Verwendung von Data-aos-Anchor-Placement:

Siehe den Stift Animate an Scroll -Beispielen - Attribute II von SitePoint (@sinepoint) auf CodePen.

Erforschen der inneren Arbeiten der AOS -Bibliothek

Das Ziel von auf Scroll

ist es, die Logik und die Animation getrennt zu verarbeiten. Zu diesem Zweck wird die Logik im JavaScript geschrieben, die Animation ist jedoch im CSS geschrieben. Diese Trennung ermöglicht es uns, unsere eigenen Animationen zu schreiben und sie basierend auf den Anforderungen des Projekts in einem sehr sauberen und wartbaren Workflow zu ändern.

Die Bibliothek verfolgt alle Elemente und ihre Positionen. Auf diese Weise kann es die AOS-Animate-Klasse dynamisch hinzufügen oder entfernen, basierend auf den von uns bereitgestellten Einstellungen. Beispielsweise wird die AOS-Animate-Klasse entfernt, wenn die Elemente, auf die sie angewendet wird, aus dem Ansichtsfenster herausgehen. Wenn ein Element jedoch den Wert von Daten-AOS-Once-Set auf TRUE hat, wird die AOS-Animate-Klasse nicht aus diesem bestimmten Element entfernt, wodurch die Animation bei nachfolgenden Scroll-Ereignissen, die das Element in Sicht stellen, verhindern.

aoS wendet auch den Standardwert von Attributen auf das -Element im HTML -Dokument an. Zum Beispiel wird Daten-AOS-Eröffnung so eingestellt,

Wie ich bereits erwähnt habe, wendet die Bibliothek die Animationsdauer nur im Bereich von 50 bis 3000 mit Schritten von 50 ms an. Dies bedeutet, dass Sie standardmäßig keine Animationsdauer von 225 ms haben können. Sie können diese Dauer jedoch mit CSS wie folgt hinzufügen:

bower <span>install aos --save</span>

Es ist ebenfalls ganz einfach, AOS Ihre eigenen benutzerdefinierten Animationen hinzuzufügen.

Erstellen Sie einfach einen Daten-AOS-Attribut-Selektor und setzen Sie ihn auf den Namen Ihrer benutzerdefinierten Animation.

Fügen Sie als Nächst

Nehmen wir zum Beispiel an, Ihre Animation wird

rotate -c bezeichnet und das Element, auf das sie angewendet wird, wird zunächst um -180 Grad gedreht.

So sollte Ihr CSS aussehen:

bower <span>install aos --save</span>

Um die letzte Stufe Ihrer Animation festzulegen (in unserem Beispiel ist dies das Element, das sich von -180 Grad auf 0 Grad dreht), fügen Sie die folgende CSS -Regel direkt unter dem vorherigen hinzu:

<span>npm install aos --save</span>

Fügen Sie nun Data-AOS = "Drehen-C" zu Ihrem ausgewählten HTML-Element hinzu, und dies dreht sich im Uhrzeigersinn (von -180 ° C bis 0 Grad), wenn Benutzer dieses Element in Sichtweise scrollen.

Hier ist eine Live-Demo, die benutzerdefinierte Rotationsanimationen sowohl im Uhrzeigersinn als auch gegen den Uhrzeigersinn mit der obigen Methode zeigt:

Siehe den Stift Animate on Scroll - benutzerdefinierte Animationen von SitePoint (@sinepoint) auf CodePen.

Mehr Funktionen

Die AOS -Bibliothek bietet auch viele andere Funktionen, die sie noch flexibler und benutzerfreundlicher machen. Anstatt die Attribute für jedes Element getrennt bereitzustellen, können Sie sie als Objekt an die Init () -Funktion übergeben. Hier ist ein Beispiel:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

Sie können auch die Animationen auf bestimmten Geräten oder unter bestimmten Bedingungen unter Verwendung des Deaktivierungsschlüssels deaktivieren und seinen Wert auf einen Gerätetyp wie Mobile, Telefon oder Tablet einstellen. Alternativ können Sie die Bibliothek auch mit einer Funktion deaktivieren.

Hier sind zwei Beispiele, um beide Merkmale zu veranschaulichen:

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>

In diesem Stift werden AOS -Animationen, wenn der Bildschirm kleiner als 800px ist, unter Verwendung der obigen Funktion deaktiviert:

Siehe den Stift animieren auf Scroll -Beispielen - Deaktivieren Sie Animaionen von SitePoint (@sinepoint) auf CodePen.

Neben init () liefert AOs auch zwei zusätzliche Funktionen: refresh () und refreshhard ().

aktualisiert () wird verwendet, um alle Offsets und Positionen aller Elemente neu zu berechnen. Es wird automatisch bei Ereignissen wie der Fensterreside aufgerufen.

refreshhard () wird automatisch aufgerufen, wenn neue Elemente programmgesteuert aus oder dem DOM hinzugefügt werden. Auf diese Weise kann die Bibliothek die Auswahl an AOS -Elementen auf dem Laufenden halten. Sobald das Array aktualisiert wurde, löst Refreshhard () auch die Funktion refresh () aus, um alle Offsets neu zu berechnen.

Schlussfolgerung

Dieses Tutorial hat Ihnen die -Schit in der Scroll -Bibliothek vorgestellt, mit der Sie Elemente animieren können, während Sie auf der Webseite nach oben oder unten scrollen.

keine Abhängigkeiten haben und Sie Ihre eigenen benutzerdefinierten Animationen erstellen lassen, sind zwei Funktionen, die AOS zu einer großartigen Auswahl der Bibliothek für Scrollenanimationen machen.

Wenn Sie an JavaScript -Animation interessiert sind, können Sie sich auch JS mit Performance: RequestArimationFrame von Tim Evko ansehen.

.

Haben Sie Ihre jemals AOS in einem Projekt ausprobiert? Wie war deine Erfahrung? Fühlen Sie sich frei, einige Tipps mit anderen Lesern zu teilen.

FAQs über Scrollanimationen mit der AOS -Bibliothek

Wie installiere ich die AOS -Bibliothek in meinem Projekt? Öffnen Sie Ihr Terminal und navigieren Sie zu Ihrem Projektverzeichnis. Geben Sie dann den folgenden Befehl ein: NPM Installieren Sie AOS -Save. Dieser Befehl installiert die AOS -Bibliothek und speichert sie in Ihren Projektabhängigkeiten. Nach der Installation können Sie es mithilfe von 'AOS' in Ihr Projekt importieren. und initialisieren Sie es mit aoS.init ();.

Kann ich die AOS -Animationen anpassen? Die AOS -Bibliothek enthält mehrere Datenattribute, mit denen Sie die Animationen anpassen können. Beispielsweise können Sie Daten-AOS-Dauer verwenden, um die Dauer der Animation, die Daten-AOS-Delay festzulegen, um eine Verzögerung vor dem Start der Animation festzulegen, und Daten-AOS-Offset, um den Abstand vom oberen Rand der Seite festzulegen, wo auf der Seite festgelegt wird Die Animation sollte starten. Nach der Installation können Sie es in Ihre Vue.js -Komponenten importieren und im montierten Lebenszyklushaken initialisieren. Sie können dann die AOS -Datenattribute in Ihrem HTML verwenden, um die Animationen anzuwenden. Die AOS -Bibliothek in Ihrem React.js -Projekt. Nach der Installation können Sie es in Ihre React.js -Komponenten importieren und in der KomponentDidmount -Lebenszyklusmethode initialisieren. Sie können dann die AOS-Datenattribute in Ihrem JSX verwenden, um die Animationen anzuwenden.

Kann ich AOS mit Pseudo-Elementen verwenden? Dies liegt daran Wenn Sie Probleme mit AOS haben, können Sie verschiedene Dinge tun. Stellen Sie zunächst sicher, dass Sie die AOS -Bibliothek richtig installiert und initialisiert haben. Zweitens überprüfen Sie Ihre HTML auf alle Syntaxfehler, die möglicherweise verhindern, dass die Animationen funktionieren. Drittens verwenden Sie die Entwickler -Tools Ihres Browsers, um die Elemente zu inspizieren und festzustellen, ob die AOS -Klassen angewendet werden.

Kann ich AOS auf mobilen Geräten verwenden?

Ja, AOS funktioniert auf Mobilgeräten. Beachten Sie jedoch, dass Animationen ressourcenintensiv sein können und auf älteren oder unteren Geräten möglicherweise nicht gut abschneiden. Sie können die Option Deaktivieren verwenden, um Animationen auf bestimmte Geräte bei Bedarf zu deaktivieren.

Wie aktualisiere ich die AOS -Bibliothek? Öffnen Sie Ihr Terminal, navigieren Sie zu Ihrem Projektverzeichnis und geben Sie den folgenden Befehl ein: NPM Update AOS. In diesem Befehl wird die AOS -Bibliothek auf die neueste Version aktualisiert.

Kann ich AOS mit anderen JavaScript -Bibliotheken verwenden? Stellen Sie jedoch sicher, dass die anderen Bibliotheken die AOS -Animationen nicht beeinträchtigen. Wenn Sie Probleme haben, versuchen Sie, die anderen Bibliotheken zu deaktivieren, um festzustellen, ob sie das Problem verursachen.

Wie deinstalliere ich die AOS -Bibliothek? Verwenden Sie NPM. Öffnen Sie Ihr Terminal, navigieren Sie zu Ihrem Projektverzeichnis und geben Sie den folgenden Befehl ein: NPM -Deinstallation von AOS. In diesem Befehl wird die AOS -Bibliothek aus Ihrem Projekt entfernt.

Das obige ist der detaillierte Inhalt vonCool on Scroll -Animationen, die mit der AOS -Bibliothek einfach gemacht wurden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!