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!