tl;dr: Wer das Scrolling steuern will oder zwischen Viewports Animationen einbauen will sollte sich die Optionen in Elementor und die Erweiterung Dynamic Content for Elementor näher anschauen.
Animationen einzelner Elemente wurden hier beschrieben. in diesem Post geht es um das Verhalten ganzer Container (Abschnitte) und aller ihrer Inhalte, die den ganzen Viewport ausfüllen oder größer sind.
Voraussetzung ist ein aktives aus Elementor Pro.
Die Funktion Scroll Snap ist unter
Dashboard > Elementor > Einstellungen | Eigenschaften (Stabile Merkmale) | Scroll Snap
zu aktivieren. Danach kann man auf jeder Seite über
Panel > Seitenseinstellungen (links unten) > Erweitert | Scroll Snap
die Funktion für die aktuelle Seite/Beitrag/Template aktivieren.
Wenn man Scroll Snap aktiviert gibt es 3 Einstellungen, die jeweils responsiv für Tablet, Mobil etc. auch angepasst werden können.
Snap Position ist default auf oben eingestellt. Das bedeutet die obere Kante des Containers wird an der oberen Kante des Fensters ausgerichtet.
Mitte bedeutet, dass der Container vertikal zentriert im Viewport beim Scrollen einrastet. Unten schliesslich richtet an der unteren Fensterkante aus.
Was aber nun, wenn man einen Sticky Header hat? Hier kommt nun die Option Snap Padding ins Spiel. Wenn zB. einen Sticky Header mit einer Höhe von 100px hat und hier den Wert 100 einträgt rastet bei der Einstellung oben der Conatiner eben 100 px unter der oberen Fensterkante, und damit auch unter dem Header ein. Gegengleich funktioniert das auch mit einem Footer und der Snap Position unten.
Die Einstellung Scroll Snap Stop kann von der Defaulteinstellung Normal auch auf Always umgestellt werden. Normal bedeutet, dass beim Scrollen nur gestoppt wird wenn der Abschnitt/Container der nächste ist, bei Always ist das „Überscrollen“ eines Containers ohne Stop nicht möglich – wer’s braucht…
Besonders viel Sinn machen diese Scroll Snap Einstellungen wenn man ein Design (typisch für Onepager) hat wo die verschiedenen Inhaltsbereiche untereinander Bildschirmfüllend angezeigt werden sollen.
Um einen Container in der vollen Bildschirmhöhe anzuzeigen wird die Angabe
… Container > Layout | Min. Höhe: 100 vh
verwendet. Wenn man aber zB. einen Sticky Header mit der Höhe 100 px verwendet wäre der Container (siehe Snap Padding im vorigen Absatz) dann höher als der Viewport, man muss also die Höhe des Headers von der Mindest Höhe substrahieren. Dazu kann man statt der Einheit das Editiersymbol beim Eingabefeld für die Zahl verwenden und zB:
calc(100vh - 100px)
eingeben. Nun passt die Höhe wieder.
Was aber nun, wenn man mehr will? Wie so oft bietet hier die Erweiterung Dynamic Content for Elementor einiges an Features. Hinsehen lohnt sich.
Aktiviert werden die entsprechenden Features unter
Dashboard > dynamic.ooo > Features > Page Settings | Page Scroll
Die Einstellungen findet man dann im
Panel > Seiten Einstellungen | Page Scroll
es gibt 3 unterschiedliche Bereiche:
Um Effects Scroll zu nutzen verwendet man CSS-Klassen. Dazu muss man den betroffenen Container(n) oder Abschnitt(en) unter
Panel > Container | Layout | CSS-Klassen
eine Klasse zuweisen. In dem Beispiel hier wurde die Klasse einfach scrolleffect genannt (Syntax beachten: Kleinschreibung, keine Sonder- oder Leerzeichen verwenden).
Hinweis: beim Arbeiten mit Elementor kann es vorkommen, dass die Effekte nicht sofort sichtbar sind. Speichern, Vorschau und Neuladen können hier Abhilfe schaffen.
Die zuvor erfundene und den gewünschten Teilen zugeordnete Klasse wird nun unter Custom section class eingetragen, die man in den Seiteneinstellungen bei aktivem Page Scroll und aktiviertem Effects Scroll angezeigt bekommt.
Man kann die Scroll-Effekte bestimmten Viewports zuordnen.
Wenn das erledigt ist kann man nun in der Zeile Animation Effects einen oder mehrere auswählen, wobei beliebige Kombinationen möglich sind. Zur Auswahl stehen
Diese Animationen sind kombinierbar. So kann man zB mit Opacity und Fixed dafür sorgen, dass ein Container beim Runterscrollen oben stehen bleibt und ausgeblendet wird. Hier ein paar Beispiele auf der Herstellerseite:
Snap Scroll macht in etwa das, was auch Scroll Snap (s.o.) macht. Nur dass man zusätzlich eine konfigurierbare Navigation erhält und wirklich eine Menge Einstellungen vornehmen kann. Da es sich um Seiteneinstellungen handelt sind Funktionen und Stil-Einstellungen untereinander untergebracht (es gibt keine Einstellungen im Tab Stil).
Custom section class empfiehlt sich für die Definition einer Klasse für die Effekte. (Wie oben). Sollte man die Sektionen dem Theme überlassen kann man mit Interstitial Section jene Sektionen ausnehmen, die kein Scap Scroll können sollen. Unter Scroll Speed kann man die Geschwindigkeit in 1000tel Sekunden angeben, Offset dient zur Einstellung eines Abstandes am oberen Fensterrand.
Über die Funktion Set section height to full screen kann man die Höhenangaben auch dem Plugin überlassen. Hier gilt einfach zu überprüfen, ob das gewählte Theme das auch so unterstützt. Wenn nicht: Klassen definieren!
Die folgenden Funktionen sind auf den ersten Blick ev. ein wenig unklar, experimentieren hilft: Overflow Scroll erlaubt das Scroll Snap die Kontrolle über das Scrollen von überlaufenden Sektionen. Update Hash definiert. ob die Browser-Scroll-Position bei durchscrollen Upgedatet werden soll. Über Show Scrollbar können die Scrollbars ausgeblendet werden; Touch Scroll legt fest, ob Snap Scroll auch touch-scroll-events kontrollieren können soll.
Ein vmtl. wichtigeres Feature für die Verwendung der Erweiterung ist die Option Enable Navigation. Dadurch wird am rechten Rand des Viewports vertikal zentriert eine Navigation eingeblendet, die vielfältig gestaltet werden kann. Von einfachen Punkten bis hin zu eigenen Icons sogar mit Beschriftung (hier werden die CSS-ID’s verwendet) sind möglich. Einige Demos auf der Herstellerseite geben einen Vorgeschmack:
Wenn man also die gewünschten anspringbaren Sektionen über eine CSS-Klasse definiert und dann diese Navigation aktiviert bekommt man eine sehr gut konfigurierbare Subnavigation innerhalb der Seite. Besonders für lange Seiten und Onepager eine gute Bedienungserleichterung für die User.
Die dritte mögliche Option heisst Inertia Scroll, übersetzt so in etwa „träges Scrollen“. Diese Trägheit wird durch einen Koeffizienten gesetzt, dazu kann man der Sektion eine Neigung (Skew) und ein Abprallen (Bounce) angeben. Das ganze kann wie gewohnt vertikal oder aber auch horizontal angewendet werden.
Von den Voraussetzungen her ist das Ganze aber nicht ganz so trivial, dynamic.ooo hat es für die Verwendung mit dem Theme OceanWP voreingestellt. Man kann ausprobieren, ob das verwendete Theme funktioniert indem man den Automatic Wrapper aktiviert, sollte das nicht funktionieren kann man die IDs für Viewport und Content Scroll eintragen. Ein wenig ausprobieren wird wohl notwendig sein, hier je eine Beispielanwendung für
Sicher ein sehr trendiges Gestaltungselement das jedoch umsichtig eingesetzt verwendet werden sollte.
Mit Elementor Pro kommt man also recht einfach vom simplen Scrollen zu einem userfreundlichen Scroll Snap. Weiter gedacht und angewendet mit dem Erweiterungspaket Dynamic Content for Elementor kann aus einem Scrollvorgang ein wichtiges Designelemenent der Usererfahrung werden.
Veröffentlicht am: 6. August 2023
Letztes Update: 4. Januar 2024