> 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/allgemeines.md).

# Allgemeines

## 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 Vordergrundbildbewegen, 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ünen 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

{% hint style="success" %}
**Hilfreich:** Verwende die Einkaufswelten Vorlage um einen Banner zu erstellen.
{% endhint %}


---

# 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/allgemeines.md?ask=<question>
```

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.