Parallaxe ist der Effekt, bei dem verschiedene Teile einer Seite mit unterschiedlichen Geschwindigkeiten scrollen, der Hintergrund also langsamer als der Vordergrund vorbeidriftet und der Abschnitt ein Gefühl von Tiefe aufnimmt Die Rellax-erweiterung In Master Addons Pro Fügt das hinzu Elementarparallaxenscrollen Effekt auf Widgets wie ein Bild oder eine Überschrift, mit der Rellax.js-Bibliothek, ohne eine Zeile JavaScript zu berühren Es wird als Abschnitt auf der Registerkarte Erweitert des Elements angezeigt, mit Steuerelementen für Geschwindigkeit, Bewegungsprozentsatz, Z-Index und Richtung.
Hier ist, wo Rellax lebt, was jede Einstellung macht und wie der Effekt aussieht, sobald die Seite live ist.
Was die Rellax-Erweiterung bewirkt #
Rellax pinnt eine scrollbasierte Animation an das von Ihnen ausgewählte Element, während der Besucher scrollt, bewegt sich dieses Element schneller oder langsamer als der Rest der Seite, abhängig von der Geschwindigkeit, die Sie einstellen. Richten Sie es auf ein Heldenbild und der Hintergrund gleitet; Richten Sie es auf eine Überschrift und der Text schwebt vor allem drum herum. Da es pro Element funktioniert, können Sie im selben Abschnitt ein paar verschiedene Geschwindigkeiten mischen und eine geschichtete Schriftrolle ohne ein spezielles Parallaxen-Plugin erstellen.
Betrachten Sie es als den scrollbasierten Cousin zweier anderer Master Addons-Bewegungswerkzeuge: Schwimmende Effekte, das ein Element allein ohne Scrollen animiert, und Transformiert, der dreht, skaliert und schief geht.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master Addons Pro Mit aktiver Lizenz installiert, da Rellax eine Pro-Erweiterung ist, falls Sie diese noch nicht installiert haben, folgen Sie der Installationsführung.
- Die Rellax-Erweiterung ist im Master Addons-Optionsfeld aktiviert.
- Ein zu animierendes Widget, beispielsweise ein Bild, ein Symbol oder ein Gradientenüberschrift. Rellax bewegt das gesamte Widget, kein Schnitthintergrundbild.
So fügen Sie einen Parallaxeneffekt in Elementor hinzu #
Wählen Sie das Element aus, das Sie verschieben möchten Öffnen Sie die Fortgeschritten Tab im Elementor-Panel und scrollen Sie nach unten zum Rellax Abschnitt (er trägt das violette Master Addons-Abzeichen).Erweitern und umdrehen Aktivierte Rellax zu Ja. Dieser Kipphebel ist der Schalter für den gesamten Effekt, also passiert nichts, bis er eingeschaltet ist.
Eine Sache, die die Leute auf die Probe stellt: Die Parallaxe läuft nur auf der Live-Seite oder in der Vorschau, niemals während Sie auf der Leinwand bearbeiten. Warten Sie also nicht, bis sich das Element im Editor bewegt, sondern drücken Sie die Vorschau, um es zu sehen.
Rellax-Einstellungen erklärt #
Mit aktiviertem Rellax formen die übrigen Bedienelemente die Bewegung des Elements:
- Geschwindigkeit: Wie schnell sich das Element relativ zur Bildlaufrolle bewegt Höhere positive Zahlen bringen es beim Abwärtsscrollen schneller nach oben; negative Zahlen drücken es in die andere Richtung Die Demo verwendet 6. Starten Sie etwa 4 bis 6 und passen Sie von dort aus an, da große Werte ein Element aus seinem Abschnitt entfernen können.
- Prozentsatz: Der Ausgangspunkt der Animation, von 0 bis 1, basierend darauf, wo das Element im Ansichtsfenster sitzt Die Demo setzt es auf 0,4. Stupsen Sie dies an, wenn die Wirkung zu früh oder zu spät einsetzt.
- Z-Index: Stapelreihenfolge, gleiche Idee wie CSS z-index Erhöhen Sie es (die Demo verwendet 3) Wenn ein Parallaxenelement über oder unter einem Nachbarn sitzen muss, überlappt es die mittlere Schriftrolle.
- Vertikal: Bewegen Sie das Element beim Blättern der Seite auf und ab. Dies ist die übliche Parallaxenrichtung.
- Horizontal: Bewegen Sie das Element stattdessen nach links und rechts Praktisch für Elemente, die Sie von der Seite her einschieben möchten.
Geschwindigkeit und Prozentsatz haben beide das responsive Symbol daneben, so dass Sie verschiedene Werte für Desktop, Tablet und Mobilgerät festlegen können Das ist wichtiger als es klingt Eine Geschwindigkeit, die auf einem breiten Desktop großartig aussieht, kann sich auf einem Telefon erschütternd anfühlen, wo der Bildschirm kurz ist und das Element auf kleinem Raum viel Boden bedeckt Die Abwahl der Mobilgeschwindigkeit ist normalerweise die Lösung.
Sehen Sie sich den Parallaxeneffekt auf der Live-Seite an #
Veröffentlichen Sie die Seite (oder öffnen Sie die Vorschau) und scrollen Sie. Das Element, das Sie Rellax aktiviert haben, bewegt sich in seinem eigenen Tempo, während der Rest der Seite normal scrollt, und dieser Geschwindigkeitsunterschied ist es, der die Tiefe verkauft. Hier ist der Demoheld, mit einem Parallaxenbild, das gegen eine „Scroll UP“-Überschrift scrollt: „
Wenn sich die Bewegung zu stark oder zu subtil anfühlt, gehen Sie zurück zum Speed-Regler und optimieren Sie ihn. Parallaxe ist einer dieser Effekte, bei denen sich eine kleine Zahl normalerweise besser liest als eine große.
Häufige Anwendungsfälle #
- Heldenbilder: Geben Sie einem Bild-Widget in einem Landing-Page-Helden eine langsame Drift, damit sich der Abschnitt in dem Moment lebendig anfühlt, in dem jemand scrollt
- Schwebende Schlagzeilen: Setzen Sie Rellax auf eine Überschrift, damit es vor dem Inhalt darunter aufsteigt.
- Schichtabschnitte: Stellen Sie zwei oder drei Elemente im selben Abschnitt auf unterschiedliche Geschwindigkeiten ein, um eine gestapelte Schriftrolle mit mehreren Tiefen zu erhalten.
- Feature-Callouts: Schieben Sie ein Symbol oder Abzeichen horizontal hinein, wenn der Besucher es erreicht.
- Geschichtenerzählseiten: Verwenden Sie eine sanfte Parallaxe zwischen den Blöcken, um zu verhindern, dass sich eine lange Schriftrolle flach anfühlt.
Für Bewegungen, die nicht an das Scrollen gebunden sind, kombinieren Sie Rellax mit Eingangsanimation Elemente animieren also so hinein, wie sie erscheinen, und bewegen sich dann mit Parallaxe weiter, während die Schriftrolle weitergeht Durchsuchen Sie das Ganze Widgets und Erweiterungen Liste, um den Rest des Motion-Toolkits zu sehen.
Video-Tutorial #
Schauen Sie lieber? Dieses Video geht Ende an Ende durch die Rellax-Erweiterung, vom Aktivieren auf einem Element bis zum Parallaxen-Scroll auf der Live-Seite:
Häufig gestellte Fragen #
Wie füge ich einen Parallaxen-Scrolling-Effekt in Elementor hinzu?
Wählen Sie ein Element aus, öffnen Sie die Registerkarte Erweitert, erweitern Sie den Abschnitt Master Addons Rellax, und setzen Sie Aktiviertes Rellax auf Ja. Dann legen Sie die Geschwindigkeit und Prozentzahl fest Das Element scrollt in seinem eigenen Tempo auf der Live-Seite, kein Code erforderlich.
Warum kann ich den Parallaxeneffekt im Elementor-Editor nicht sehen?
Rellax läuft nur auf dem Frontend Das Element sitzt still, während Sie auf der Leinwand bearbeiten, also öffnen Sie die Vorschau oder sehen Sie sich die veröffentlichte Seite an, um die Parallaxenbewegung zu sehen.
Was macht die Einstellung Speed in Rellax?
Geschwindigkeit steuert, wie schnell sich das Element im Vergleich zum Seitenscroll bewegt Höhere positive Werte bewegen es beim Abwärtsscrollen schneller nach oben, negative Werte kehren die Richtung um Werte um 4 bis 6 funktionieren für die meisten Heldenabschnitte gut.
Kann ich mobil eine andere Parallaxengeschwindigkeit verwenden?
Ja. Die Geschwindigkeits- und Prozentsteuerung ist responsiv, sodass Sie separate Werte für Desktop, Tablet und Mobilgeräte festlegen können. Eine Senkung der Geschwindigkeit auf Mobilgeräten verhindert, dass sich der Effekt auf kleinen Bildschirmen zu aggressiv anfühlt.
Verlangsamt die Rellax-Erweiterung meine Seite?
Rellax führt pro Element eine scrollbasierte Animation aus, so dass die Wirkung klein bleibt Wenden Sie es nur auf die Elemente an, die es benötigen, und nicht auf jeden Block auf der Seite, und die Dinge bleiben reibungslos.
Einwickelnd #
Die Rellax-Erweiterung ist die schnellste Möglichkeit, eine hinzuzufügen Elementarparallaxenscrollen Effekt ohne separates Plugin oder benutzerdefinierten Code Aktivieren Sie es auf jedem Element, stellen Sie die Geschwindigkeit, den Prozentsatz, den Z-Index und die Richtung ein und das Element scrollt mit echter Tiefe auf der Live-Seite. Weitere Möglichkeiten, Dinge auf dem Bildschirm zu verschieben, finden Sie unter Transformiert und Schwimmende Effekte, und sehen Sie sich die an Rellax-Parallaxen-Erweiterungsseite Zum Vergleich mit Elementor Pro Motion Effects.
