> For the complete documentation index, see [llms.txt](https://docs-sw5.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-sw5.zenit.design/plugins/parallax-banner/einrichtung.md). # Einrichtung Nachdem Du eine Einkaufswelt angelegt hast kannst, findest Du im Reiter "Elemente" ein neues Element "Parallax Banner" oder "Parallax Text Slider Banner". Ziehe dieses Element in das rechts stehende Grid und spanne es auf gewünschte Größe auf. {% hint style="info" %} Die Erläuterungen richten sich nach unserer Demo und die mitgelieferte installierte Einkaufswelten-Vorlage unter {% endhint %} ![](/files/-MNz8whv9DNBRkKV2Nbq) ## Bildmaterial Das Bildmaterial für den Hintergrund sollte `2000x2000` Pixel betragen. Quadratische Bilder eignen sich bei dem rechteckigen Browser-Fenster (Viewport) sehr gut, da Bilder beim Scrollen verschoben werden. Rechteckige Bilder im Querformat eignen sich daher nicht, da die obere Kante des Bildes beim Scrollen zu sehen sein würde. Die Bilder in den übrigen Ebenen (Bild 2 und Bild 3) sollten transparente PNG oder GIF Dateien sein. Eine Vorgabe für das Seitenverhältnis besteht hier nicht. Anders als beim Hintgerundbild sollten hier Objekte gezeigt werden, welche sich über den Hintergrund bewegen. ## Konfiguration - Bildgröße Die Bildgröße kann für jedes Bild einzeln eingestellt werden. Dabei können alle Befehle eingegeben werden, welche CSS zur Verfügung stellt. **Wichtig**: Ist die `attachment` Eigenschaft auf `fixed` gesetzt, was im Einkaufsweltenmodus **Fluid** der Fall ist, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. * **auto** - Das `auto` Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird. * **cover** - Das `cover` Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt. * **contain** - Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist. * **Pixelwerte z.B.: 100px 100px** - Ein Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt. * **Prozentwerte** z.B.: 80% 80% - Ein Wert, der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert. Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements. Negative Prozentwerte sind nicht erlaubt. Beispiel: In unserer [Demo](http://plugins.zenitdesign.de/sw-demo-4/hoehenluft-abenteuer/) haben wir das Hintergrundbild für die Schuhe auf \[cover] gesetzt und so über den gesamten Viewport des Browser gestreckt. Für die kleineren Viewpors auf Smartphone oder Tablets haben wir das Banner-Element erneut erzeugt und den Wert für den Hintergrund für die Breite auf auto und die Höhe auf 120% gesetzt \[auto 120%]. ## Konfiguration - Geschwindigkeit Die Geschwindigkeit des Bildes beim Herunterscrollen. * Je näher der Wert bei 0 liegt, desto schneller wird das Bild bewegt. * **Negative** Werte bewegen das Bild nach unten. * **Positive** Werte bewegen das Bild nach oben. * Wert 0 fixiert das Bild und beschleunigt es nicht. ``` Sinnvolle Werte: [ -10 bis 10 ] - z.B.: 5 ``` Beispiel: * 5 = Das Bild wird mit mäßiger Geschwindigkeit nach oben bewegt * -3 = Das Bild wird mit schneller Geschwindigkeit nach unten bewegt * 0 = Das Bild bleibt stehen ![](/files/-MNz8kje1mTymEPQB2Ek) ## Konfiguration - Offset Y Mit Offset Y ist die Positionierung des Bildes vom oberen Rand zu verstehen. Damit kannst Du dein Bild nach oben oder unten setzen, um es für seine Bewegung beim Scrollen auszurichten. * Eingabe in Pixeln * Werte können positiv und negativ sein Beispiel 1: In unserer [Demo](http://plugins.zenitdesign.de/demo-4/hoehenluft-abenteuer/) haben wir so den Schuh für den link Fuß auf der obersten Ebene mit einem negative Wert `-400` um 400 Pixel nach oben verschoben. Beim Herunterscrollen wird dieser nun schneller nach unten bewegt als gescrollt wird und überlagert dadurch ab einem bestimmten Punkt den Schuh des rechten Fußes. Beispiel 2: Abhängig von der Größe sowie Richtung und Geschwindigkeit (Feld "Geschwindigkeit") des Bildes sollte man den Offset Wert verwenden. Wird das Bild z.B. nach unten bewegt sollte es zuvor durch einen negativen Offset-Wert etwas weiter nach oben gesetzt werden. In unserer [Demo](http://plugins.zenitdesign.de/demo-4/hoehenluft-abenteuer/) haben wir dies mit dem dunklen Hintergrund bei den Schuhen realisiert, da man beim Herunterscrollen sonst die obere Kante des Bildes erreichen und sehen würde. ![](/files/-MNz8ecpxypBso4F4b0k) ## Konfiguration - Overlay Das Overlay ist eine farbige Ebene, welche zwischen den Bildern und dem optionalen Text liegt. Sie dient dazu, die Lesbarkeit des Textes zu verbessern und die Bilder gegebenenfalls zu "dämpfen". --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-sw5.zenit.design/plugins/parallax-banner/einrichtung.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.