Ein Überblick über Scroll -Technologien

Die Web -Scrolling -Animationstechnologie gibt es seit vielen Jahren und wurde in den letzten Jahren zunehmend weit verbreitet. Dies kann teilweise auf die Verbesserung der Geräteleistung und die Fähigkeit zurückzuführen sein, Animationseffekte besser umzugehen.

Dieser Artikel zielt darauf ab, verschiedene Scroll-bezogene Technologien zu skizzieren und Werkzeugauswahlführer bereitzustellen, um die richtige Lösung zu finden. Diese Technologien können grob in zwei Kategorien unterteilt werden: Techniken für spezifische Bildlaufverhalten und -techniken für allgemeinere Bildlaufverhalten .

Techniken für bestimmte Bildlaufverhalten

Moderne Browser unterstützen einige einfache native CSS -Scrolling -Effekte, die in einigen begrenzten Anwendungsfällen ausreichen, um Ihre Scrolling -Animationsanforderungen zu erfüllen.

position: sticky

Wenn Sie nur ein Element auf der Seite benötigen, um beim Scrollen in der gleichen Position zu bleiben, ist position: sticky eine gute Wahl. Es ist einfach und unkompliziert und in einen modernen Browser eingebaut. Der IE -Browser und einige mobile Browser erfordern jedoch Polyfill -Unterstützung.

CSS Parallaxe

Dies ist nicht so sehr eine Technik wie ein Trick, aber für einfache Parallaxeffekte sehr praktisch. Sie können unterschiedliche Teile der Seite mit unterschiedlichen Geschwindigkeiten haben. Der größte Nachteil ist, dass es schwierig ist zu verstehen, welche Werte zur Festlegung von Perspektive und Transformation verwendet werden sollen, um genaue Parallaxeffekte zu erzielen.

CSS Scrolling Capture Point

Mit dem Scroll -Snaping -Punkt kann der Browser die spezifische Scrollposition erfassen, die Sie festlegen, nachdem der Benutzer das Scrollen normal beendet hat. Dies hilft, bestimmte Elemente sichtbar zu halten. Die API ändert sich jedoch immer noch. Verwenden Sie daher unbedingt die neueste API und achten Sie darauf, dass Sie sich nicht in der Produktion darauf verlassen.

Glatte Scrollen

Verwenden von window.scrollTo() im JavaScript- oder scroll-behavior in CSS wird ein glattes Scrollen nativ unterstützt, wenn Sie zu verschiedenen Teilen innerhalb der Seite springen. Derzeit unterstützen nicht alle Browser den universellen glatten Scrollen mit einem glatten Mausradbetrieb. Verschiedene JavaScript-Bibliotheken versuchen, eine reibungslose Scrolling-Unterstützung für Mausradoperationen hinzuzufügen, aber ich habe keine Bibliothek gefunden, die vollständig fehlerfrei ist und mit allen anderen Scrolling-Techniken gut funktioniert. Außerdem ist das sanfte Scrollen selbst nicht immer eine gute Wahl.

Techniken für das universelle Scrolling -Verhalten

Derzeit ist es unmöglich, eine universelle Animation zu erstellen oder auszulösen, die auf Scrollposition basiert, die nur CSS unter Verwendung von CSS basiert (obwohl es einen Vorschlag gibt, der in der fernen Zukunft möglicherweise irgendeine Form von universellen CSS-basierten universellen Scroll-Animationen unterstützen kann) oder einen Teil der Animation zu löschen. Wenn Sie also Elemente beim Scrollen animieren möchten, müssen Sie zumindest ein JavaScript verwenden, um den gewünschten Effekt zu erzielen. Es gibt zwei Hauptmethoden, um Animationen beim Scrollen mit JavaScript auszulösen: Verwenden von Cross-Viewer und Verwendung von Scroll-Ereignissen .

IntersectionObserver

Kreuzbeobachter sind nützlich, wenn Sie nur Informationen darüber benötigen, ob das Element im Ansichtsfenster sichtbar ist und wie gut es sichtbar ist. Dies macht sie zu einer guten Wahl, um Animationen zu enthüllen. Trotzdem gibt es einige Schwierigkeiten (wenn auch nicht unmöglich) mit einem Cross-Viewer-Wert, z. Cross-Viewer ist auch nicht sehr hilfreich, wenn Sie eine Bildlaufanimation durchführen möchten, wenn sich ein Element zwischen Start- und Endpunkten befindet und sich nicht damit überlappt.

Verwenden Sie Scrolling -Ereignisse

Die Verwendung von Scroll -Events bietet Ihnen die größte Freiheit bei der Kontrolle von Scroll -Animationen. Sie können Elemente beeinflussen, wenn Sie unabhängig von der Position des Elements im Ansichtsfenster scrollen und die Start- und Endpunkte entsprechend Ihren Projektanforderungen genau festlegen.

Wenn es jedoch nicht richtig drosselt und es keine bequeme API gibt, um ein bestimmtes Verhalten zu erzeugen, kann es auch einen großen Einfluss auf die Leistung haben. Aus diesem Grund ist es oft hilfreich, eine gute Scrolling -Bibliothek zu verwenden, um das Drosseln zu bewältigen und eine bequemere API zur Verfügung zu stellen. Einige Bibliotheken können sogar viele Probleme mit der Größenänderung für Sie bewältigen!

Werkzeuge zum Erstellen von universellem Scrolling -Verhalten

Es gibt einige insgesamt Scrolling -Bibliotheken, die versuchen, Ihnen die volle Kontrolle über die Scrolling -Animation zu geben, ohne alle Berechnungen selbst durchzuführen.

Scrollmagic

Scrollmagic bietet eine relativ einfache API, um verschiedene Bildlaufeffekte zu erstellen, und kann mit verschiedenen Animationsbibliotheken wie GSAP und Velocity.js verknüpft werden. In den letzten Jahren war es jedoch immer weniger Wartung, was zur Schaffung von Scrollscene geführt hat.

Scrollscene

Scrollscene ist im Wesentlichen ein Wrapper, der versucht, Scrollmagic und/oder Cross-Viewer-Verwendung zu verwenden. Es verwendet eine benutzerdefinierte, gepflegte Version von Scrollmagic und fügt zusätzliche Funktionen wie Video -Wiedergabe, Haltepunkte der Szeneninitialisierung und Haltepunkte der Szenendauer hinzu. Es verwendet auch GSAP.

Scrolltrigger

Scrolltrigger ist das offizielle Greensock -Plugin für GSAP. Es verfügt über eine lange Liste von Funktionen und die einfachste API, die Sie in jeder Scrolling -Bibliothek verwenden können (zumindest für mich). Damit haben Sie die vollständige Kontrolle über die Definition der Start- und Endpositionen von Scrolling -Animationen, Animieren von irgendetwas (WebGL, Leinwand, SVG, DOM usw.) beim Scrollen, Pin -Elementen an Ort und Stelle, wenn die Animation ausgeführt wird, und vieles mehr. Sie können es sogar mit einer glatten Scrolling -Bibliothek verbinden und sie werden perfekt zusammenarbeiten. Darüber hinaus wird es von Greensock und Greensock -Foren unterstützt.

Erwähnenswert: Lokomotive Scroll

Während es nicht versucht, eine umfassende Bildlaufbibliothek zu sein, wie die anderen oben genannten Bibliotheken, konzentriert sich die Lokomotive -Schriftrolle auf die Bereitstellung eines benutzerdefinierten reibungslosen Scrolls. Sie können auch einige Eigenschaften des DOM -Objekts animieren, indem Sie Datenattribute hinzufügen oder onscroll -Ereignis an andere Arten von Objekten animieren.

Zusammenfassen

Für bestimmte spezifische Bildlaufanimationseffekte wie klebrige Positionierung und Parallaxe können die CSS -Technologie zumindest bei der Verwendung von Polyfill ausreichend sein, um Browser zu unterstützen, die diese Eigenschaften nicht unterstützen.

Normalerweise empfehle ich die Verwendung von GSAP -Scrolltrigger, da dies alles ausführen kann, was die CSS -Eigenschaft und mehr tun kann. Scrolltrigger behandelt die Browserunterstützung und -berechnungen, damit Sie sich auf Animation konzentrieren können!

In der folgenden Tabelle können Sie die Tools auflisten, mit denen Sie bestimmte Effekte erstellen können:

(Die Tabelle sollte hier eingefügt werden, um verschiedene Aspekte verschiedener Scrolling -Technologien wie Leistung, Benutzerfreundlichkeit, Funktionalität usw. zu vergleichen.)

Das obige ist der detaillierte Inhalt vonEin Überblick über Scroll -Technologien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!