Momentan gibt es einen wiederkehrenden Trend, animierte Seitenelemente im Webdesign zu verwenden. Wenn Sie die Seite nach unten scrollen, werden Elemente auf natürliche Weise animiert. Diese Animationen werden nur einmal ausgeführt und beginnen erst, wenn sich das Element im Ansichtsfenster des Browsers befindet.
Ich habe dieses Konzept etwas mit jQuery zusammen mit CSS3-Übergängen untersucht. Kurz gesagt: Dieses Skript sucht nach speziellen Klassen auf der Seite und fügt mit jQuery eine neue Klasse für Übergangseffekte hinzu. Die bereits animierten Elemente werden dann aus dem Event-Handler entfernt. Wenn keine Elemente mehr animiert werden müssen, wird der Ereignishandler vollständig entfernt, bis Sie die Seite aktualisieren. Werfen Sie einen Blick auf mein Demo-Beispiel, um genau zu sehen, was wir erstellen, und folgen Sie uns!
Live Demo - Quellcode herunterladen
Grundlegende Seitenstruktur
Zu Beginn habe ich ein einfaches HTML5-Layout mit einem externen Stylesheet und einer Kopie der neuesten jQuery-Bibliothek erstellt. Alle meine benutzerdefinierten JavaScript-Dateien werden in eine andere externe Datei geschrieben scrollview.js.
Die Animationsinformationen können mithilfe von Klassen und Datenattributen direkt in HTML gespeichert werden. Schauen wir uns das erste animierte Element auf meiner Seite an.
Dieses enthält zwei separate animierte Divs, die sich in einem Container nebeneinander befinden. Das Attribut Datenposition sagt uns, von welcher Seite das Element kommt. Sie verwenden auch einige Klassen für verschiedene CSS-Eigenschaften.
Das .floatr und .floatl Klassen repräsentieren Floated-Elemente nach rechts bzw. links. .animBlock Elemente werden standardmäßig ohne Deckkraft und Übergangseigenschaften für die Animation ausgeblendet.
Sie finden diesen Code-Ausschnitt in meinem Stylesheet. Es dreht sich um die .notViewed und .betrachtet Klassen, die uns mitteilen, wann ein Element animiert wurde (oder nicht). Jeder Block rendert anfangs mit .notViewed und jQuery überprüft diese animierten Elemente, um zu sehen, welche angezeigt wurden und welche nicht.
Beim Hinzufügen der .betrachtet In dieser Klasse bewegen sich diese Elemente um 20% von der rechten / linken Seite und wechseln ebenfalls von 0% bis zu 100%. Die Techniken in CSS sind ziemlich einfach und funktionieren in allen modernen Browsern einwandfrei. Mit dem Wechsel zwischen Klassen mit jQuery ist es etwas komplizierter.
Das Scroll-Ereignis binden
Ich möchte umziehen scrollview.js welches von der Hauptindexdatei getrennt ist. Es gibt zwei Codeblöcke, wobei einer der Ereignishandler und der andere eine vorgefertigte Funktion ist.
Die ersten beiden Variablen repräsentieren zwischengespeicherte Kopien von jQuery-Objekten. $ blockiert ist ein jQuery-Objekt, das alle animierten Blöcke mit darstellt .notViewed Klassen. Grundsätzlich sollte es alle möglichen animierten Elemente enthalten, sodass wir einfach alles durchlaufen können. $ window Wird jedes Mal aufgerufen, wenn der Benutzer auf der Seite einen Bildlauf durchführt, so ist die Verwendung einer zwischengespeicherten Kopie hinsichtlich Verarbeitung und Speicher effizienter.
Die jQuery-Methode (.each ()) kann Objekte und Arrays durchlaufen. In diesem Fall haben wir ein Objekt, das viele andere Objekte auf der Seite enthält. Bei jedem Bildlaufereignis verarbeitet diese Funktion jedes Element in $ blockiert Objekte einzeln.
Der Erste ob{} Eine Anweisung spart Zeit, sobald ein Element die Animation abgeschlossen hat. Da die $ blocks-Variable ein zwischengespeichertes Objekt ist, wird sie nicht automatisch aktualisiert, sobald einige Klassen geändert wurden. Stattdessen müssen wir überprüfen, ob jedes Element bereits aktualisiert wurde, um die Klasse zu verwenden .betrachtetWenn ja, stoppen Sie die aktuelle Operation, um zur nächsten zu gelangen.
Ansonsten wissen wir, dass das Element noch nicht animiert wurde. Hier ist die detailliertere Funktion isScrolledIntoView () Es wird eine Reihe bestimmter Eigenschaften geprüft. Mein Code wurde in diesem Beitrag zu Stack Overflow geändert, was eine hervorragende Startvorlage bietet.
Animierte Elemente
Ich werde diese Funktion zum besseren Verständnis in Segmente unterteilen. Zunächst einmal ist es ziemlich einfach, Variablen einzurichten, die für das Scroll-Ereignis und jedes Element, das durch den $ -Block geleitet wird, eindeutig sind.
Die ersten beiden Variablen docViewTop und docViewBottom ändert sich bei jeder Schriftrolle. Ich habe mir auch gedacht, dass wir manchmal Elemente animieren möchten, bevor sie sich vollständig im Viewport befinden. Deshalb habe ich eine erstellt Versatz Variable, die direkt in HTML angewendet werden kann. Sie werden feststellen, dass ich nach einer Single suche Daten-Offset Diese Eigenschaft ist optional - und setzt den Standardwert 0 außer Kraft. Sie wird auf mein 2. animiertes Element auf der Seite angewendet:
Der nächste JS-Code prüft, wo sich das aktuelle Element auf der Seite befindet. Denken Sie daran, dass dies alles durchläuft, also ändern sich diese Werte basierend auf dem aktuellen Ansichtsfenster und welches Element gerade durch die Funktion geleitet wird. Zwei Variablen elemTop und elemBottom Geben Sie uns numerische Werte an, die auf die volle Höhe des aktuellen Objekts verweisen.
Wenn Sie den Offset 0 verwenden, müssen Sie die Codes nicht ändern. Wir animieren nur, wenn das Element vollständig angezeigt wird. Wenn es jedoch einen Versatz gibt, müssen wir prüfen, ob der Benutzer vom oberen Rand der Seite nach unten oder von unten nach oben scrollt. Ich habe dies getan, indem ich den aktuellen Wert des oberen Ansichtsfensters von der oberen Position des eigentlichen Elements abgezogen habe.
Wenn sich das Element höher auf der Seite befindet als der Ansichtsbereich des Benutzers, ist es eine kleinere Zahl (näher an 0). Das Abziehen des oberen Werts (kleiner) des Elements vom oberen Wert des Ansichtsfensters (größer) ist immer eine positive Zahl oder sehr nahe an Null. Der Benutzer muss also auf der Seite tiefer sein und somit nach oben scrollen. Addiert man den Versatz zum oberen Wert des Elements, wird es höher und damit niedriger. auf der Seite, obwohl es eigentlich nirgendwohin geht. Dies ist alles bildliche Logik, um zu bestimmen, wann die Versatzanimation beginnen soll.
Andernfalls sollte der Benutzer von oben nach unten kommen und wir ziehen diesen Versatzwert von der Unterseite des Elements ab (jetzt nach unten). Dieses Konzept ist zunächst etwas verwirrend. Denken Sie an diese oberen / unteren Werte wie Pixelzahlen. Ganz oben im Fenster steht 0 und ganz unten im Fenster der höchstmögliche Wert, den wir erhalten können.
CSS-Klassen wechseln
Das letzte Stück dieser Funktion erzeugt den Animationseffekt, sobald sich das Element innerhalb der Ansicht befindet. Normalerweise wird die Logikanweisung nur ausgeführt, wenn sich das Element im vollständigen Ansichtsfenster befindet. Durch den Versatzwert können Elemente jedoch früher den Animationsprozess starten.
Vereinfacht ausgedrückt liest sich die Logik in etwa so: Wenn sich die untere Position des Elements in der Ansicht oder knapp unter der Ansicht befindet und die obere Position perfekt ausgerichtet ist oder sich gerade in der Ansicht befindet, animieren Sie das Element. Beide Bedingungen muss true sein, bevor JavaScript Code ausführt.
Es sollte etwas offensichtlich sein, dass die einzige Anforderung das Entfernen ist .notViewed und fügen Sie dann unsere animierende Klasse hinzu .betrachtet. Dies geschieht einmal pro Seite, und sobald ein Element in Sichtweite gebracht wurde, aktiviert es jetzt den Rückkehrbefehl von meinem allerersten Codeblock. Es bleibt immer noch im $ blockieren Objekt, aber wir sparen Zeit, wenn Sie diese Funktion nicht erneut ausführen.
Was passiert also, wenn alle Elemente sichtbar sind? Wir möchten dieses Bildlaufereignis nicht über die Notwendigkeit hinaus anhängen. $ ('. animBlock.notViewed'). Länge gibt eine Anzahl von Elementen zurück, die diesem jQuery-Selektor entsprechen. Sobald sich jedes Element geändert hat .animBlock.viewed Dieser Wert gibt 0 zurück.
Sobald dies 0 erreicht, haben wir gerade das letzte Element auf der Seite animiert. Wenn dies endlich geschieht, initiieren wir .off (), das an das Scroll-Ereignis des Fensters angehängt ist. Jetzt wird der Scrolling-Ereignishandler nur ausgelöst, wenn der Benutzer die Seite erneut aktualisiert. Es ist sinnvoll, diese Methode innerhalb der abschließenden Logikprüfung zu halten, da sie nur so oft ausgeführt wird, wie Elemente zum Animieren vorhanden sind (in meiner Demo sind es insgesamt 5).
Live Demo - Quellcode herunterladen
Schließen
Diese Technik ist auf fortgeschrittene Websites ausgerichtet, die nicht unbedingt ältere Browser unterstützen. Die meisten Internetbenutzer sind zu den neuesten Versionen von IE, Firefox, Chrome, Opera usw. übergegangen. Sie können jedoch immer die Browserversionen in JavaScript überprüfen, um diese Elemente sichtbar zu machen, wenn CSS3-Übergänge nicht möglich sind. Fühlen Sie sich frei, eine Kopie meines Quellcodes herunterzuladen und zu sehen, was Sie sonst noch mit diesem Effekt erstellen können.