Einrichtung
Last updated
Last updated
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.
Die Erläuterungen richten sich nach unserer Demo und die mitgelieferte installierte Einkaufswelten-Vorlage unter https://plugins.zenitdesign.de/demo-4/hoehenluft-abenteuer/
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.
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 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%].
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.
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
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 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 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.
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".
