Überblick über die Bildlauftechnologie

Animationen zum Scrollen von Webseiten gibt es schon seit vielen Jahren. In letzter Zeit sind solche Animationen häufiger geworden. Möglicherweise liegt dies daran, dass die zum Surfen im Internet verwendeten Geräte leistungsfähiger geworden sind. Diese Geräte können normalerweise mehr visuelle Effekte verarbeiten und ausgeben als zuvor. Es gibt viele Bildlauftechnologien. Der Zweck dieses Artikels besteht darin, einen Überblick über solche Technologien und Tools zu geben, mit denen Sie auswählen und erstellen können, was Sie in der jeweiligen Situation benötigen. Ich würde die Bildlauftechnologien in zwei große Kategorien einteilen. Die erste umfasst Technologien zum Implementieren spezifischer Bildlaufmechanismen, und die zweite umfasst allgemeine Bildlauftechnologien.

Technologien zur Implementierung spezifischer Bildlaufmechanismen

In CSS gibt es einige einfache Standard-Bildlaufeffekte, die von modernen Browsern unterstützt werden. In einigen Fällen kann ihre Verwendung ausreichen, um die besonderen Anforderungen eines Projekts zu erfüllen.

▍CSS-Eigenschaftsposition: klebrig

Wenn Sie ein Element benötigen, um nicht mit dem Rest des Seiteninhalts zu scrollen, reicht es beim Stylen dieses Elements aus, die Eigenschaft anzuwenden position: sticky. Dies ist ein einfacher und verständlicher Trick, dessen Unterstützung in moderne Browser integriert ist. Damit dies jedoch in IE und einigen mobilen Browsern funktioniert, benötigen Sie eine Polyfüllung. Wenn Sie sich für dieses Thema interessieren, schauen Sie sich dieses Material an.





Das blaue Element „ruht“ oben auf dem Container und scrollt nicht zusammen mit den übrigen Elementen.



Hier ist eine Demonstration eines solchen Bildlaufs.

Parallaxeeffekt

Der Parallaxeeffekt ist vielmehr keine spezielle Technologie, sondern eine spezielle Technik. Wie dem auch sei, dieser Effekt kann in den Fällen sehr nützlich sein, in denen Sie verschiedene Teile der Seite mit unterschiedlichen Geschwindigkeiten scrollen müssen. Diese Technik ist in diesem Material gut beschrieben . Es gibt viele Beispiele für seine Implementierung. Zum Beispiel dieser . Für mich ist der Hauptnachteil dieser Technik, dass es schwierig ist zu verstehen, welche Werte, die den richtigen Parallaxeeffekt ergeben, zum Anpassen von Perspektive und Transformationen verwendet werden sollten.





Parallaxeeffekt: Elemente bewegen sich mit unterschiedlicher Geschwindigkeit.



Hier ist eine Demonstration des Parallaxeeffekts.

▍Scrollen mit Anker zu bestimmten Punkten

Durch die Verwendung des Bildlaufs mit Ankerpunkten kann der Browser die Position von Elementen automatisch anpassen, indem er sie an eine bestimmte Position verschiebt, nachdem der Benutzer den normalen Bildlaufvorgang abgeschlossen hat. Dies kann in Fällen nützlich sein, in denen es erforderlich ist, dass sich ein bestimmtes Element nach dem Ende des Bildlaufs vollständig im Sichtfeld des Benutzers befindet. Die API ist jedoch immer noch instabil . Versuchen Sie daher, die neuesten Implementierungen zu verwenden, und achten Sie darauf, diesen Ansatz für das Scrollen in der Produktion zu verwenden. Hier ist ein guter Artikel zu diesem Thema.





Wenn der Benutzer den Inhalt scrollt und das Element vom oberen Rand des Containers entfernt, positioniert der Browser das Element automatisch neu, sodass es vollständig sichtbar ist.



Hier ist eine Demonstration, wie das Scrollen mit Ankerpunkten funktioniert.

▍Glattes Scrollen

Smooth Scrolling wird durch Browser - Tools unterstützt , wenn eine Seite zu einem bestimmten Abschnitt Scrollen der Verwendung window.scrollTo () Methode in JavaScript oder sogar die Verwendung von Scroll-Verhalten CSS - Eigenschaft . Derzeit sind spezielle JavaScript-Bibliotheken erforderlich, um ein reibungsloses Scrollen mit geglätteten Mausradbewegungen zu implementieren. Wenn Sie solche Bibliotheken verwenden, müssen Sie jedoch deren normale Interaktion mit anderen Bildlauftechnologien sicherstellen. Auch das reibungslose Scrollen ist nicht immer eine gute Idee.

Allgemeine Bildlauftechnologien

Derzeit gibt es keine Möglichkeit, nur CSS zu verwenden, um Allzweck-Bildlaufanimationen basierend auf der Bildlaufposition auszuführen (obwohl es einen Vorschlag gibt, wonach wir in ferner Zukunft einige Animationen haben könnten, die auf Allzweck-Bildlauftechnologien basieren). ... Wenn Sie Elemente beim Scrollen animieren möchten, müssen Sie daher mindestens JavaScript-Code verwenden, um den gewünschten Effekt zu erzielen. Es gibt zwei Methoden zum Verwenden von JavaScript zum Animieren von Elementen beim Scrollen. Die erste besteht darin, die Intersection Observer-API zu verwenden, die zweite darin, das Ereignis zu behandeln scroll.

▍Verwenden der Intersection Observer-API

Mit der IntersectionObserver- API können Sie verschiedene Aufgaben im Zusammenhang mit dem Scrollen erfolgreich lösen, wenn Sie zum Starten der Animation nur wissen müssen, ob ein Element im Ansichtsfenster sichtbar ist und welcher Teil des Elements sichtbar ist ... Dies macht die IntersectionObserver-API zu einem großartigen Werkzeug zum Auslösen von Animationen, die das Erscheinungsbild eines Elements auf dem Bildschirm begleiten. Trotzdem sind einige der Effekte mit dieser API nur sehr schwer (wenn auch möglich) zu implementieren. Dies ist beispielsweise der Start verschiedener Animationen, abhängig von der Bewegungsrichtung eines Elements. Diese API ist außerdem nicht besonders nützlich in Situationen, in denen Sie beim Scrollen die Animation starten müssen, wenn sich das Element irgendwo in der Mitte des Ansichtsfensters befindet, dh nicht im Ansichtsfenster angezeigt wird und nicht aus diesem verschwindet.

▍Verwenden des Bildlaufereignisses

Für diejenigen, die für die Implementierung von Animationen während des Bildlaufs das Ereignis verwenden scroll, gibt es sehr große Möglichkeiten. Diese Technik ermöglicht es beim Scrollen, das Element an einer beliebigen Position des Elements relativ zu den Rändern des Ansichtsfensters zu beeinflussen. Mithilfe des Ereignisses scrollkönnen Sie die Position des Beginns und des Endes der Animation entsprechend den Anforderungen des Projekts sehr genau festlegen.



Vor diesem Hintergrund sollte beachtet werden, dass dieser Ansatz zum Scrollen von Animationen das System erheblich belasten kann. Dies geschieht, wenn der Entwickler sich nicht um die Leistung kümmert und die Häufigkeit der Ereignisverarbeitung nicht einschränkt scroll. Darüber hinaus zur Verfügung des Programmierers, der sich entscheidet, die Veranstaltung zu nutzenscrollEs wird keine praktische API geben, mit der verschiedene Bildlaufskripte implementiert werden können. Aus diesem Grund ist es häufig scrollsinnvoll , anstelle einer eigenen Implementierung der Ereignisverarbeitungsmechanismen eine spezialisierte Bibliothek zu verwenden, deren Autoren sich bereits um die Auswirkungen der Ereignisverarbeitung scrollauf die Leistung und die API gekümmert haben . Einige dieser Bibliotheken können dem Entwickler sogar bei Problemen mit der Elementgröße helfen.

Tools zum Erstellen allgemeiner Bildlaufmechanismen

Es gibt mehrere leistungsstarke Bibliotheken zum Scrollen, die dem Entwickler die volle Kontrolle über die Animationen geben sollen, die beim Scrollen von Seiten ausgeführt werden, und das Leben des Entwicklers so weit wie möglich gestalten sollen, ohne ihn dazu zu zwingen, selbst komplexe Berechnungen durchzuführen.

▍ScrollMagic

Die ScrollMagic- Bibliothek bietet uns eine relativ einfache API, mit der wir beim Scrollen verschiedene Effekte erstellen können. Diese Bibliothek kann in Verbindung mit verschiedenen Animationsbibliotheken wie GSAP und Velocity.js verwendet werden . Zwar wird diese Bibliothek in den letzten Jahren nicht gut unterstützt. Dies führte zur Erstellung der ScrollScene-Bibliothek.

▍ScrollScene

ScrollScene ist im Wesentlichen ein Wrapper, der die Benutzerfreundlichkeit der ScrollMagic-Bibliothek und / oder der IntersectionObserver-API verbessern soll. Es verwendet eine eigene Version von ScrollMagic, die eine bessere Unterstützung als die reguläre Bibliothek bietet. Hier gibt es zusätzliche Funktionen, wie z. B. die Videowiedergabe und die Unterstützung von Haltepunkten, die sich auf die Animation auswirken. Darüber hinaus verwendet diese Bibliothek GSAP.

▍ScrollTrigger

Die ScrollTrigger- Bibliothek ist das offizielle GreenSock-Plugin für GSAP. Diese Bibliothek verfügt über eine Vielzahl von Funktionen. Ihre API scheint mir die einfachste der vorhandenen Bibliotheken zum Scrollen von Bibliotheken zu sein. Mit dieser Bibliothek haben Sie die volle Kontrolle darüber, wo genau die Bildlaufanimation beginnt und endet. Sie können während des Bildlaufs alles animieren, was Sie möchten (WebGL, Canvas, SVG, DOM). Sie können Elemente für die Dauer der Animation anheften. Die Möglichkeiten dieser Bibliothek sind nicht darauf beschränkt. Darüber hinaus unterstützt GreenSock diese Bibliothek, und Sie können Hilfe bei der Verwendung in den GreenSock- Foren erhalten .

▍Noteworthy Bibliothek: Locomotive Scroll

Die Locomotive Scroll- Bibliothek ist nicht bestrebt, eine so breite Palette von Funktionen bereitzustellen wie die anderen von uns diskutierten Bibliotheken. Der Hauptzweck besteht darin, ein reibungsloses Scrollen zu implementieren. Mithilfe dieser Funktion können Sie außerdem einige Eigenschaften von DOM-Objekten mithilfe von Attributen animieren data-*oder mithilfe des onscrollHandlers andere Objekttypen animieren.

Vergleich von Technologien und Werkzeugen

Hier ist ein Vergleich der Bildlauftechnologien.





Hier ist ein Vergleich der überprüften Bibliotheken.

Zusammenfassung

Um einige spezielle Bildlaufmechanismen wie das Fixieren von Elementen und den Parallaxeeffekt zu implementieren, können Standard-CSS-Funktionen ausreichend sein. Zumindest - dies gilt, sofern Polyfills für Browser verwendet werden, die die entsprechenden CSS-Funktionen nicht unterstützen.



Normalerweise empfehle ich die Verwendung der ScrollTrigger-Bibliothek, um das Scrollen anzupassen. Damit können Sie alles erreichen, was reines CSS kann, und vieles mehr. Diese Bibliothek kümmert sich um die Browserunterstützung für bestimmte Technologien und erleichtert die Durchführung von Berechnungen, sodass die Person, die sie verwendet, nur noch ihren Geschäften nachgehen kann.



Welche Technologien verwenden Sie beim Einrichten des Bildlaufs in Ihren Projekten?