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!