Erstellen von Scroll-basierten Animationen mit JQuery und CSS3

Bewegung erstellen ist eine großartige Möglichkeit, Ihren Zuschauern ein interessantes und interaktives Erlebnis zu bieten. Mit modernen Websites, die eine größere Interaktivität bieten, wird immer erwartet, dass selbst einfache Websites ein gewisses Maß an Animation / Bewegung bieten, um ihre Besucher zu engagieren.

Heute werde ich eine Technik skizzieren, die Sie an Ihre Webprojekte anpassen können und Animationen auslösen, wenn Sie in eine vordefinierte Region scrollen. Diese Animationen werden mit CSS -Transformationen und CSS -Übergängen erstellt. Wir werden auch JQuery verwenden, um zu erkennen, wann die Elemente sichtbar sind, und um die entsprechenden Klassen hinzuzufügen/zu entfernen.

Für diejenigen, die Beispiele dafür in Aktion sehen möchten, können Sie direkt zu den Demos springen.

Key Takeaways

• scrollbasierte Animationen können mit JQuery und CSS3 erstellt werden, wodurch die Zuschauer ein interaktives Erlebnis bietet. Diese Animationen werden ausgelöst, wenn ein Benutzer in eine vordefinierte Region scrollt, wodurch er ansprechender und visuell ansprechender wird.
• Die Technik umfasst die Verwendung von CSS -Transformationen und CSS -Übergängen, wobei JQuery zur Erkennung verwendet wird, wenn Elemente sichtbar sind und geeignete Klassen hinzufügen/entfernen. Überlegungen zu diesem Ansatz sind Browserkompatibilität und Geschwindigkeit, wobei moderne Browser 2D- und 3D -Transformationen für reibungslose Animationen unterstützen.
• Der Prozess beinhaltet das Erkennen von Animationselementen in Sicht, das Einbinden in das Bildlaufereignis, das Umgang mit der Größenänderung und die Berechnung der Höhe und Breite von Elementen. Die Animationen können ausgelöst werden, wenn sich ein Element innerhalb des Ansichtsfensters befindet, sodass zusätzliche Transformationen oder Effekte für interaktive Schnittstellen angehalten werden können.
• Beispiele für Scroll-Animation sind das Schieben in Elemente von links, Verblassen von Elementen von unten nach oben und die multi-stufige Sprunganimation. Diese Techniken können für verschiedene Webprojekte angepasst werden, z. B. für die Anzeige von Personalprofilen oder Kursinformationen.

Warum Animationen auf Scroll auslösen?

Der Hauptgrund, warum wir Animationen für die Scrollen auslösen möchten, ist, dass sie so aktivieren, wie der Benutzer ein Element in Ansicht scrollt.

Wir möchten vielleicht Elemente verblassen oder eine interessante Transformation liefern, und diese würden nur sinnvoll sein, wenn der Benutzer sie tatsächlich anzeigen kann.

mit CSS oder mit JQuery?

animieren

Es gibt Vor- und Nachteile für jeden Ansatz. JQuery (Lesen Sie JavaScript) ermöglicht es Ihnen, Dinge zu animieren, die CSS nicht (z. Schicht.

Ich werde Transformationen über CSS verwenden, es gibt jedoch immer Variablen, die je nach Situation in Betracht gezogen werden müssen. Ich würde die folgenden Faktoren berücksichtigen:

Browserkompatibilität

Da unsere Lösung auf Transformationen basiert, beschränkt sich unsere Browserkompatibilität auf diejenigen, die entweder 2D -Transformationen oder 3D -Transformationen unterstützen.

Alle modernen Browser werden 3D -Transformationen unterstützen, und einige der älteren Legacy -Browser wie Internet Explorer 9 und Opera 11.5 unterstützen 2D -Transformationen. Die Gesamtunterstützung sowohl für Desktop- als auch für mobile Browser ist umfassend.

Die Animate -Methode von

jQuery funktioniert in einem beliebigen (vernünftigen) Browser, sofern Sie die 1.x -Version der Bibliothek verwenden. JQuery 2.x hat die Unterstützung für IE8 und unten entfernt.

Geschwindigkeit

Wir möchten schnelle und reibungslose Animationen, insbesondere wenn es um mobile Geräte geht. Als solches ist es immer am besten, Übergänge und Transformationen nach Möglichkeit zu verwenden.

Die Beispiele verwenden 3D-Transformationen mit 2D-Fall-Backs für ältere Browser. Wir möchten die Beschleunigung der Hardware für Geschwindigkeit erzwingen, sodass eine 3D -Transformation ein Muss ist (wir werden Translate3D zusammen mit anderen Funktionen verwenden, die eine GPU -beschleunigte Renderung verursachen).

jQuery's Animate -Methode ist erheblich langsamer als eine GPU -assistierte Transformation, daher werden wir JQuery nur für unsere Ereignisbehandlung / -berechnungen verwenden, nicht für unsere Animation selbst (da wir möchten, dass sie so reibungslos wie möglich sind).

Randnotiz

Wir alle wissen, dass JQuery! == JavaScript, oder? Nun, es stellt sich heraus, dass die Verwendung von Vanille -JS für Animationen doch keine so schlechte Idee ist. Während dies jenseits des Rahmens dieses Tutorials liegt, finden Sie hier zwei hervorragende Artikel zu diesem Thema für diejenigen, die mehr herausfinden möchten:

CSS vs. JS Animation: Welches ist schneller?
Myth Busting: CSS -Animationen gegen JavaScript

Jetzt zurück zur Show…

Erkennung von Animationselementen in Ansicht

Der Gesamtpunkt dieser Technik besteht darin, alle unsere Elemente zu betrachten, die wir als animatierbar markiert haben, und dann festzustellen, ob sie sich derzeit im Ansichtsfenster befinden. Lassen Sie uns durchlaufen, wie wir dies erreichen:

Selektor Caching

Scrollen ist ein teures Geschäft. Wenn Sie dem Scroll -Ereignis einen Ereignishörer anschließen, wird er mehrmals abgefeuert, wenn ein Benutzer die Seite scrollt. Da wir unsere Dimensions- / Berechnungsfunktionen anrufen, wenn ein Benutzer scrolls, ist es eine gute Idee, die von unseren Selektoren in Variablen zurückgegebenen Elemente zu speichern. Dies wird als Selektor -Caching bezeichnet und vermeidet, dass wir das DOM immer wieder abfragen.

In unserem Skript beziehen wir uns sowohl auf das Fensterobjekt als auch die Sammlung von Elementen, die wir animieren möchten.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

Beachten Sie das Dollar -Zeichen vor den Variablen. Dies ist eine Konvention, um anzuzeigen, dass sie ein JQuery -Objekt oder eine Sammlung von Objekten halten.

Einklammern in das Scroll -Ereignis

Als nächstes erstellen wir unseren Event -Handler, der für das Scroll -Event hört. Dies wird abfeuern, wenn wir die Seite scrollen. Wir übergeben es einen Verweis auf unsere Funktion check_if_in_view (die wir in einer Minute erhalten). Jedes Mal, wenn das Scroll -Ereignis abgefeuert wird, wird diese Funktion ausgeführt.

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

Umgang mit der Größenänderung

Da wir Höhen und Breiten berechnen, müssen wir zusammen mit der allgemeinen Größenänderung die Orientierungsänderungen berücksichtigen.

Wir können unseren Event -Handler aktualisieren, um sowohl für die Schriftrolle als auch für die Größe der Größe zu hören. Dadurch können unsere Erkennungsfunktion funktionieren, wenn wir die Größe oder die Änderung der Orientierung ändern.

$<span>window.on('scroll', check_if_in_view);</span>

Zusätzlich verwenden wir die JQuery -Triggermethode, um ein Bildlaufereignis auszulösen, sobald das DOM fertig ist. Wir tun dies, damit eines der animierten Elemente im Ansichtsfenster wie in Sichtweise erkannt und die Animation so angewendet wird, als hätten wir gescrollt.

$<span>window.on('scroll resize', check_if_in_view);</span>

scrollpositionserkennung

Der tatsächliche Erkennungsteil dieses Beispiels stammt aus dem folgenden Skript.

$<span>window.trigger('scroll');</span>

Lassen Sie uns zusammenbrechen, was hier passiert.

Die Funktion check_if_in_view wird zunächst aufgerufen, wenn das DOM bereit ist und dann jedes Mal die Größe oder Scrollen.

wir erhalten die aktuelle Höhe des Fensters zusammen mit der oberen und unteren Position, damit wir wissen, welchen Bereich wir sehen.

Wir suchen nach allen Elementen, die sich animieren (gespeichert in der Variablen $ animation_elements). Für jedes dieser Elemente sammeln wir seine Höhe zusammen mit der oberen und unteren Position (so wissen wir, wo es auf der Seite lebt).

Wir vergleichen jedes Element, um festzustellen, ob seine untere Position größer ist als die obere Position des Fensters, aber auch, dass die obere Position des Elements geringer ist als die untere Position des Fensters.

Hier ist ein visuelles Beispiel

Berechnung der Höhe und Breite

In unserer Erkennungsfunktion müssen wir die Höhen und Positionen verschiedener Elemente erhalten, um die Dinge richtig zu berechnen. Hier haben wir die Höhenfunktionen von JQuery verwendet. Es ist wichtig, dass diese Höhenfunktionen

zusammenarbeiten, was diese Höhenfunktionen funktionieren.

height () und width ()

Die Höhe der Höhe () und width () gibt die Höhe oder Breite eines Elements zurück. Sie schließen alle Polsterung, Grenzen und Ränder aus.

Besuchen Sie eine vollständige Aufschlüsselung in der Höhe oder der Breite.

InnerHeight () und Innerwidth ()

Die Funktionen der Innerheight () und Innerwidth () geben die Höhe oder Breite des Elements zurück, einschließlich seiner zusätzlichen Polsterung (es schließt jedoch sowohl Grenzen als auch Ränder aus)

Besuchen Sie die Dokumentation in der Innerheight oder in der Innerbreite.

oterHeight () und oterwidth ()

Die Funktionen der äußerenheight () und der äußeren Breite () geben die Höhe oder Breite des Elements zurück und schließen seine Polsterung und Rand ein.

Zusätzlich können Sie angeben, dass Sie seine Ränder einbeziehen, indem Sie einen Wert der Richtig an die Funktion übergeben.

Besuchen Sie die Außen- oder Außenbreiten -Dokumentation

Beispiele für Bildlaufanimations

Die unten aufgeführten

sind eine Reihe von Animationen aufgeführt, die die Grundlagen dessen verwenden, was wir besprochen haben. Diese Beispiele suchen nach Animationselementen und wenden die aktive In-View-Klasse an, wenn sie sich im Ansichtsfenster befinden.

Elemente, die Sie bewegen möchten, sollten alle eine Standardklasse wie Animation-Element haben, die seine Position als relativ oder absolut feststellt. Wenn Sie mehrere Effekte erstellen möchten, können Sie außerdem entsprechende Klassen wie Dia-Links erstellen, die mit der In-View-Klasse kombiniert werden können. Sie sollten dann die Transformation auf eine Klasse wie Animation-Element.slide-left.inview

anwenden.

von links einrutschen

Für unser erstes Beispiel werden wir bei der Eingabe des Ansichtsfensters in Elemente von links rutschen. Wir erreichen dies, indem wir eine Translate3D auf unserer Elemente x -Achse verwenden.

Siehe die Pen -CSS -Animationen auf Scroll - Sieben

In diesem Beispiel haben wir es verwendet, um Mitarbeiterprofile anzuzeigen, aber Sie können dieselbe Funktionalität wiederverwalten, um alle von Ihnen benötigten Elemente einzuschlagen.

von unten

verblassen

Diesmal werden wir unsere Elemente von unten nach oben verblassen, wenn der Benutzer scrolls. Wir erreichen dies über eine Translate3D auf der Y -Achse des Elements.

Für dieses Beispiel habe ich Kursinformationen zu Themen in einer Gitterstruktur aufgeführt. Wenn der Benutzer nach unten scrollt, verblasst jede Karte in Ansicht und bewegt sich auf, wobei Informationen über den Kurs angezeigt werden.

Siehe die Pen -CSS -Animationen auf Scroll - verblassen

Multi-Step-Bouncing-Animation

Für unser letztes Beispiel werden wir eine mehrstufige Animation verwenden. Dazu definieren wir benutzerdefinierte Keyframe -Animationen, die eine Rotation mit einer Übersetzung kombinieren. Diese Art von Animation kann dazu beitragen, Bereiche Ihrer Website zu präsentieren (für dieses Beispiel präsentieren wir Mitarbeiterprofile).

Siehe die Pen -CSS -Animationen auf Scroll - Multi -Schritt -Bewegung von SitePoint (@sinepoint) auf CodePen.

wohin von hier?

Von hier aus können Sie die von Ihnen gelernten Konzepte aufnehmen und auf Ihre Projekte anwenden.

Jetzt, da Sie erkennen können, wann ein Element im Blickfeld ist, können Sie zusätzliche Transformationen oder Effekte anketten, um interaktive Schnittstellen zu erstellen. Wenn beispielsweise ein Element das Ansichtsfenster (und nach seiner Transformation) eingibt

Verwenden Sie diese Effekte bereits in Ihren Projekten? Oder glauben Sie, dass Animationen überbeanspruchte und beeinträchtigen die Benutzererfahrung? In jedem Fall würde ich gerne in den Kommentaren von Ihnen hören.

Bringen häufig gestellte Fragen (FAQs) zu scrollbasierten Animationen mit JQuery und CSS3

Was sind die grundlegenden Anforderungen an das Erstellen von Scroll-basierten Animationen mit JQuery und CSS3? Sie müssen auch die JQuery -Bibliothek in Ihrem Projekt enthalten. JQuery ist eine schnelle, kleine und featurereiche JavaScript-Bibliothek, die das HTML-Dokument durchquert, die Ereignishandhabung und Animation vereinfacht. CSS3 hingegen ist die neueste Entwicklung der Sprache der Cascading -Stilblätter und zielt darauf ab, CSS2.1 zu erweitern. Es bringt viele lang erwartete Neuheiten wie abgerundete Ecken, Schatten, Gradienten, Übergänge oder Animationen mit Wenn Sie scrollbasierte Animationen erstellen, müssen Sie zunächst die JQuery-Bibliothek in Ihre HTML-Datei aufnehmen. Sie können es entweder von der JQuery -Website herunterladen oder direkt aus einem Content Delivery Network (CDN) einbeziehen. Sobald Sie JQuery enthalten haben, können Sie Ihren JavaScript -Code in einer separaten .js -Datei oder in Skript -Tags in Ihrer HTML -Datei schreiben. Sie können dann die .animate () -Methode von JQuery verwenden, um Animationen zu erstellen. Für CSS3-Animationen können Sie KeyFrames und die Animationseigenschaft verwenden. in jQuery. Die .animate () -Methode akzeptiert einen Dauerparameter, der bestimmt, wie lange die Animation ausgeführt wird. Die Dauer ist in Millisekunden angegeben; Höhere Werte zeigen langsamere Animationen an, nicht schnellere. -Out 'Wert der CSS3-Übergangs-Timing-Funktion. Dieser Wert gibt an, dass die Animation langsam beginnen, in der Mitte beschleunigt und am Ende langsamer wird. Dies kann Ihren Animationen ein natürlicheres und reibungsloseres Gefühl verleihen.

Wie kann ich eine Animation auslösen, wenn der Benutzer zu einem bestimmten Punkt auf der Seite scroll Seite. In der .Scroll () -Methode können Sie die Methode .Scrolltop () verwenden, um die aktuelle vertikale Position der Bildlaufleiste zu erhalten. Sie können dann eine IF -Anweisung verwenden, um zu überprüfen, ob die Bildlaufposition über einen bestimmten Punkt hinausgeht. Wenn ja Kann CSS3 -Animationen ohne jQuery verwenden. CSS3 führt die @KeyFrames -Regel und die Animationseigenschaft vor, mit denen Sie Animationen ausschließlich mit CSS erstellen können. JQuery kann jedoch mehr Kontrolle und Flexibilität gegenüber Ihren Animationen bieten, z. B. dynamisch ändernde Animationseigenschaften basierend auf der Benutzerinteraktion. Sie können eine scrollbasierte Animation in JQuery mithilfe der .stop () -Methode stoppen. Diese Methode stoppt die aktuell ausgeführte Animation auf den ausgewählten Elementen. Um eine Animation zu pausieren, ist sie etwas komplexer, da JQuery keine pausierende Animation unterstützt. Sie können dies jedoch erreichen, indem Sie ein Plugin verwenden oder den Animationszustand und den Fortschritt manuell verfolgen. Technik, bei der Hintergrundbilder langsamer sind als Vordergrundbilder, was eine Illusion der Tiefe erzeugt. Sie können diesen Effekt mit JQuery und CSS3 erreichen, indem Sie die Geschwindigkeit der Bewegung des Hintergrundbildes in Bezug auf die Geschwindigkeit der Seitencroll ändern. > Ja, Sie können mehrere CSS -Eigenschaften gleichzeitig mit der JQuery -Methode von .animate () animieren. Sie müssen nur die Eigenschaften einbeziehen, die Sie als Schlüsselwertpaare in den Parameter des Eigenschaftenobjekts der .animate () -Methode animieren möchten. 🎜>

Um sicherzustellen, dass Ihre scrollbasierten Animationen in verschiedenen Browsern funktionieren, sollten Sie immer Anbieter-Präfixe für CSS3-Eigenschaften verwenden. Diese Präfixe stellen sicher, dass die Eigenschaften in allen Browsern erkannt werden, auch wenn sie noch experimentell sind. Für JQuery -Animationen müssen Sie sich keine Sorgen um die Browserkompatibilität machen, da JQuery dies für Sie darstellt.

Das obige ist der detaillierte Inhalt vonErstellen von Scroll-basierten Animationen mit JQuery und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!