Elementarparallaxeneffekt mit Rellax.js (Pro)
Rellax ist eine Master Addons Pro Erweiterung, die die Rellax.js Parallaxenbibliothek in Elementor bringt Schalten Sie sie für ein Element ein, stellen Sie eine Geschwindigkeit von -10 auf 10 ein, und dass Element schneller oder langsamer scrollt als der Rest der Seite, was ein Gefühl von Tiefe erzeugt Sie können eine andere Geschwindigkeit für Tablet und Mobil einstellen, die vertikale oder horizontale Richtung wählen und Z-Index verwenden, um Ebenen hinter oder vor Ihren Inhalten zu verschieben Es ist kein Code oder Skriptladen erforderlich.
So fügen Sie einen Parallaxen-Scrolling-Effekt in Elementor hinzu
Sie benötigen Elementor und einen aktiven Master Addons Pro Lizenz.
- Gehe zu Master-Add-ons, Erweiterungen(Rellax einschalten und speichern.
- Bearbeiten Sie Ihre Seite mit Elementor und wählen Sie das Widget aus, das Sie verschieben möchten, z. B. ein Bild, ein Symbol oder eine Form.
- Öffnen Sie die Rellax-Einstellungen für dieses Element und schalten Sie es ein Aktivierte Rellax.
- Stellen Sie eine Geschwindigkeit ein, zum Beispiel -2 für eine langsame Drift, und passen Sie sie für Tablet und Mobiltelefon an.
- Wählen Sie Vertikal oder Horizontal und legen Sie Z-Index fest, damit die Ebene Ihren Text nicht abdeckt.
- Vorschau der Seite und scrollen, um die Bewegung zu überprüfen.
Näheres dazu in der Einstellungen für die Rellax-Erweiterung.
Geschwindigkeit, Prozentsatz und Richtung
Geschwindigkeit Läuft von -10 bis 10 in Schritten von 0,1 und kann pro Gerät eingestellt werden Negative Werte lassen das Element langsamer als die Seite bewegen, so dass es sich weiter weg anfühlt, und positive Werte bewegen es schneller, so dass es sich näher anfühlt. Prozentualer Anteil (0 bis 1) setzt, wo das Element sitzt, wenn seine Bewegung beginnt, und die Vertikal und Horizontal Optionen wählen die Richtung.
- Ein langsames Driften von -1 bis -2 für dekorative Formen hinter einem Helden.
- Eine kleine positive Geschwindigkeit für schwebende Symbole vor Inhalt.
- Eine niedrigere Geschwindigkeit oder 0 auf dem Handy, wenn sich die Bewegung auf kleinen Bildschirmen zu stark anfühlt.
Schichtung mit Z-Index
Parallaxenebenen können über Text und Schaltflächen gleiten Rellax fügt ein Z-Index Einstellung von -1 auf 50, so können Sie eine bewegliche Hintergrundschicht unter Ihrem Inhalt und eine Vordergrundform darüber halten Rellax bewegt das ganze Element, nicht sein Hintergrundbild, also platzieren Sie das Bild, das Sie verschieben möchten, in einem eigenen Bild-Widget.
- Verwenden Sie -1 für Ebenen, die hinter Inhalten liegen sollen.
- Halten Sie Schlagzeilen und Schaltflächen aus dem Weg der sich bewegenden Ebenen.
- Testen Sie die Schriftrolle vor der Veröffentlichung auf einem echten Telefon.
Elementor-Bewegungs-Effekte vs. Master-Addons Rellax
Elementor Pro hat bereits Motion Effects mit Scrolling-Effekten Hier ist, wie die beiden vergleichen.
| Merkmal | Elementor Pro Motion Effects | Meister Addons Rellax |
|---|---|---|
| Preis | Benötigt Elementor Pro | Benötigt Master Addons Pro |
| Scrollbewegung | Vertikales und horizontales Scrollen mit Geschwindigkeit und Viewport-Bereich | Rellax.js Geschwindigkeit von -10 bis 10, vertikal oder horizontal |
| Andere Scroll-Effekte | Transparenz, Unschärfe, Drehung und Skalierung | Keine, nur Bewegung |
| Mauseffekte | Mausspur und 3 D-Neigung | Nein |
| Hintergrundparallaxe | Hintergrundbewegungseffekte auf Abschnitte und Behälter | Bewegt das ganze Element |
| Einstellungen pro Gerät | Wählen Sie Geräte, auf denen Effekte ausgeführt werden | Geschwindigkeit pro Gerät |
Wenn Sie bereits Elementor Pro haben, deckt Motion Effects mehr Effekttypen ab Rellax passt zu einfachen geschwindigkeitsbasierten Ebenen, wenn Sie Master Addons Pro verwenden. Zum Schleifen von Bewegungen, die nicht vom Scrollen abhängen, siehe Schwimmende Effekte (Pro).
Was ist Rellax.js?
Rellax.js ist eine kleine, quelloffene JavaScript-Bibliothek von Dixon und Moe, die Elemente mit einer anderen Geschwindigkeit bewegen lässt, während eine Seite scrollt Auf einer handcodierten Seite fügen Sie das Skript hinzu, geben Elementen eine Rellax-Klasse und setzen Optionen wie Geschwindigkeit, Prozentsatz, Z-Index und Richtung im Code.
Diese Erweiterung bündelt Rellax.js in Master Addons Pro und ordnet diese Optionen Elementor-Steuerelementen zu, sodass Sie Geschwindigkeit, Prozentsatz, Z-Index und Richtung aus dem Panel festlegen. Das Skript lädt nur auf Seiten, auf denen ein Element Rellax verwendet Wenn Sie nicht auf Elementor sind, verwenden Sie direkt die Rellax.js-Bibliothek.
Häufig gestellte Fragen an Rellax
Funktioniert der Parallaxeneffekt mobil?
Ja. Geschwindigkeit kann für Tablet und Mobil getrennt eingestellt werden, so dass Sie einen kleineren Wert oder 0 auf Telefonen verwenden können, wenn sich die Bewegung zu stark anfühlt Testen Sie immer auf einem echten Gerät.
Kann ich ein Hintergrundbild aus einem Abschnitt verschieben?
Rellax bewegt das ganze Element, kein Hintergrundbild Setzen Sie das Bild in ein eigenes Bild-Widget hinter Ihren Inhalt und fügen Sie Rellax zu diesem Widget hinzu, oder verwenden Sie die Hintergrundbewegungseffekte von Elementor Pro für einen Hintergrund mit bewegtem Abschnitt.
Ist die Rellax-Erweiterung kostenlos?
Nr. Rellax ist Teil von Master Addons Pro. Die Rellax.js Bibliothek selbst ist kostenlos und Open Source, wenn man sie mit einem eigenen Code hinzufügt.
Können zu viele Parallaxeneffekte meine Seite verlangsamen?
Sie können Jedes bewegliche Element lässt den Browser beim Scrollen mehr Arbeit leisten, Parallaxe auf ein paar Schlüsselelemente pro Seite verwenden und die Geschwindigkeiten bescheiden halten.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
