Einkaufswelt Parallax Banner
Beschreibung
Highlights
Features
Über die Erweiterung
Einkaufswelt Parallax Banner
Einkaufswelten Element
Mit dem Parallax Banner kannst Du den beeindruckenden Parallax-Effekt in Deiner Einkaufswelt einfügen. Beim Parallax-Effekt werden verschiedene Bilder auf unterschiedlichen Ebenen positioniert. Beim Herunterscrollen werden die Ebenen in unterschiedlicher Geschwindigkeit und Richtung zueinander bewegt. Dadurch entsteht ein Effekt von Räumlichkeit und Bewegung. Es können bis zu drei Bild-Ebenen und eine Text-Ebene eingestellt werden.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
- inkl. Einkaufsweltenvorlage der Demo
- Echter Parallax Effekt
- Bis zu 3 Bild-Ebenen
- Geschwindigkeit und Richtung pro Ebene
- Vertikaler Offset pro Ebene
Parallax Verschiebung beim Scrollen
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
✓ 3 Ebenen ✓ Echter Parallax Effekt ✓ Viele Gestaltungsmöglichkeiten ✓ inkl. Einkaufswelt Vorlage
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Parallax Banner
Der Parallax Effekt gehört zu den beliebtesten Effekten im Webdesign. Technisch gesehen lässt dieser Effekt das Hintergrundbild mit einer geringeren Geschwindigkeit im Vergleich zu dem Vordergrundbild bewegen, wenn man die Seite nach unten scrollt. Durch diesen Effekt entsteht ein Gefühl von Tiefe und Dynamik.
Parallax Verstehen
Beim Parallax-Effekt wird das Bild an einer festen Position im Browserfenster fixiert und erweckt dadurch beim Scrollen den Anschein, dass die Inhalte oder Bilder in den Ebenen darüber über das Hintergrundbild geschoben werden. (background-attachment: fixed) ist daher die Basis für den Parallax Effekt.
Zusätzlich werden die fixierten Bilder und Ebenen mit Javascript beim Scrollen nach oben oder unten bewegt (Konfiguration: Geschwindigkeit). So können die Bilder in unterschiedlicher Richtung aneinander vorbeigeschoben werden, wie die Schuhe in unserer Demo.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Hinweise
background-attachment: fixed ist relativ zum Viewport. Das bedeutet, dass sich die Größe des Bildes nach dem Browser-Fenster richtet und nicht nach der Größe des Einkaufswelten Elements im Raster.
- Der Effekt eignet sich besonders für vollflächige Einkaufswelten.
- Es können mehrschichtige, aber auch einfachere Banner Elemente mit nur einem Bild erzeugt werden. Es besteht kein Zwang mehrere Bilder und Ebenen zu verwenden.
- Der Einkaufswelten Modus Fluid eignet sich am besten für diesen Effekt.
- Der Einkaufswelten Modus Resize lässt aus technischen Gründen keine fixierte Positionierung von Bilder zu. Die Bilder beziehen sich in Ihrer Größe daher nicht auf den Viewport des Browsers, sondern auf die Größe des Einkaufswelten-Elements.
Interessant: Kleinere und nebeneinanderliegende Parallax-Banner sind möglich. Die einzelnen Bilder lassen sich beim Scrollen durch die Konfiguration Geschwindigkeit beim Mitscrollen beschleunigen oder bremsen. - Die über Bild 1 (Hintergrundbild) liegenden Bilder sollten Bilder mit transparentem Hintergrund sein - Dateiformate hierzu wären *.png oder *.gif
Hilfreich:Verwende die Einkaufswelten Vorlage um einen Banner zu erstellen.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Dokumentation
https://docs-sw5-parallaxbanner.zenit.design— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
› Wir helfen Dir!
kurzfristig und kostenlos
FAQ & Support: www.zenit.design
Details
- Verfügbar in: Englisch, Deutsch
- Zuletzt aktualisiert: 8. Dezember 2020
- Veröffentlicht: 18. Januar 2018
- Version: 2.1.1
- Kategorie: Erlebniswelten
Ressourcen
Bewertungen (4)
Support 1+ Design traumhaft
Mehr geht nicht - P E R F E K T E R S E R V I C E *****
Plugin ok, Support erstklassig
Was aber wirklich außergewöhnlich ist, ist der sehr schnelle Support. Unser Problem wurde handumdrehend behoben und ein Update ausgespielt.
Fantastisch!
Ich habe zwar gerade nur die Testversion installiert, aber es wird mit absoluter SIcherheit in den nächsten Tagen gekauft! Danke für die fantastische Arbeit.
Über den Extension Partner
Zenit Design
Partner Status
-
Shopware
Premium Extension Partner
Details
- Ø-Bewertung: 5
- Partner seit: 2015
- Erweiterungen: 48
Support
- Land: Germany
- Spricht: Deutsch, Englisch
- Reaktionszeit: Sehr schnell