Überprüfe die Einstellungen für Parallax Scrolling und die Tipps zur Fehlerbehebung.

Templates in der Brine-Familie verwenden einen speziellen visuellen Effekt bei Header-Bildern, das sogenannte Parallax Scrolling. Beim Parallax Scrolling bewegt sich ein Hintergrundbild langsamer als der Inhalt im Vordergrund und erzeugt so eine Illusion von Tiefe und Immersion.

Um in Version 7.1 einen ähnlichen Parallaxe-Scrolling-Effekt zu erzielen, verwende Hintergrundbildeffekte.

Hier ist ein Beispiel für Parallax Scrolling im Burke-Template:

Bevor du loslegst

• Anhand unserer Liste aller Templates in der Brine-Familie kannst du herausfinden, ob dein Template das Parallax Scrolling unterstützt.
• Wenn Sie das Parallax Scrolling aktivieren, betrifft dies alle Banner auf Ihrer Website.
• Parallax Scrolling funktioniert auf Mobilgeräten.
• Die mittlerweile eingestellte Marquee-Familie unterstützt ebenfalls Parallax Scrolling. Um mehr zu erfahren, gehen Sie zur Anleitung für das Marquee-Template.
• Weitere Informationen zu Parallax Scrolling und zur Barrierefreiheit findest du unter Audio, Bilder und Videos barrierefrei gestalten. 

Unterstützte Seiten

Parallax Scrolling ist auf Seiten verfügbar, die Banner unterstützen:

• Index-Seiten (Hintergrundbilder hinter Layout-Seitenabschnitten)
• Layout-Seiten
• Shop-Seiten
• Veranstaltungsseiten
• Album-Seiten
• Blog-Seiten
• Galerie-Seiten

Parallax Scrolling aktivieren oder deaktivieren

Wenn die Banner auf deiner Website nicht den Parallaxeffekt aufweisen, aktiviere ihn in den Website-Stilen der Brine-Familie:

1. Öffne das Menü „Website-Stile“.
2. Scrolle nach unten zum Abschnitt Haupt: Overlay.
3. Markiere Parallax aktivieren.
4. Du kannst auch Parallax: Intelligentes Abschneiden aktivieren, um das Abschneiden zu minimieren.
5. Klicken Sie auf Speichern. 

Um Parallax Scrolling für deine Website zu deaktivieren, führe die gleichen Schritte aus, hebe aber die Markierung von Parallax aktivieren auf.

Ausgewählte Bilder hinzufügen

Um den Parallax-Effekt zu erzeugen, füge ein ausgewähltes Bild zu deiner Seite oder deinem Abschnitt hinzu:

• Ausgewählte Bilder, die zu einer Seite hinzugefügt werden, erstellen ein Banner
• Ausgewählte Bilder, die zu Index-Inhaltsabschnitten hinzugefügt werden, erstellen ein Hintergrundbild.

Wenn der Parallax-Effekt nicht angezeigt wird, stelle sicher, dass er aktiviert ist.

Verstärken Sie den Effekt

Es gibt mehrere Möglichkeiten, die Wirkung des Parallax Scrolling zu verstärken.

Inhalte mischen

Mischen Sie Parallax-Scrolling-Bilder mit Inhalten und Bildern, die nicht über Parallax Scrolling verfügen. Der sich schneller bewegende Inhalt scheint über die Parallax-Bilder zu gleiten.

Beispielsweise kannst du in einem Index Inhaltsabschnitte mit Parallax Scrolling mit Galerie-Index-Abschnitten ohne Parallax Scrolling oder mit Inhaltsabschnitten ohne Hintergrundbilder kombinieren.

Overlay-Inhalte hinzufügen

Eine weitere Möglichkeit, das Parallax Scrolling zu verstärken, besteht darin, dem Bild Text, Buttons oder sonstige Inhalte als Overlay hinzuzufügen. Dieser Inhalt scrollt mit der gleichen Geschwindigkeit wie der Rest der Seite, schneller als das Bild. In der Brine-Familie kannst du folgende Inhalte mit Blöcken hinzufügen:

• Banner – Fügen Sie Inhalte zum Intro-Bereich hinzu.
• Index-Seitenabschnitte – Füge Inhalte zum Seiteninhaltsbereich hinzu.

Einen Farbfilter hinzufügen

Du kannst zu allen Bannern auf deiner Website mit Overlay-Farbe im Abschnitt Haupt: Overlay der Website-Stile einen Farbfilter hinzufügen.

Zuschneiden

Um zu verstehen, wie sich das Abschneiden auf Parallax-Bilder auswirkt, hilft es, sich Ihre Website als ein Blatt Papier mit einem vorzustellen, in das ein rechteckiges Loch geschnitten wurde. Das Parallax-Bild ist eine separate Schicht darunter, die nur durch das Loch im Papier sichtbar ist.

Damit das Papier schneller als das Bild scrollen kann, muss das Bild größer als das Loch sein. Der zusätzliche Platz oben und unten im Bild ist das, was beim Bewegen des Papiers nach oben und unten sichtbar wird.

Aus diesem Grund haben Abschneiden- und Fokuspunktänderungen möglicherweise keinen spürbaren Einfluss auf die Position eines Bildes mit Parallax Scrolling. Ihre Website ist so konzipiert, dass das Bild an den Seiten Ränder hat, damit es den Parallaxeffekt darstellen kann.

Tipp: Aktiviere Parallax: Intelligentes Abschneiden  unter Website-Stile, um das Abschneiden des Bildes auf der linken und rechten Seite zu minimieren.

Probleme beim Scrollen

Wenn bei aktiviertem Parallax Scrolling Probleme beim Scrollen auftreten, musst du möglicherweise die Größe der Seite verkleinern. Es kann sein, dass Browser Seiten mit Parallax Scrolling langsam laden, besonders wenn die Gesamtseitengröße 15 MB oder mehr beträgt. Wenn das Scrollen immer noch nicht richtig aussieht oder wenn die Reduzierung der Seitengröße keine Option für dich ist, solltest du Parallax deaktivieren.