Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Parallax Scrolling

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.

Version 7.1 unterstützt kein Parallax Scrolling.

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

parallax_scroll_download.gif

Bevor Sie anfangen

Unterstützte Seiten

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

  • Index-Seiten (Hintergrundbilder hinter Layout-Seitenabschnitten)
  • Layout-Seiten
  • Produktseiten
  • Veranstaltungsseiten
  • Albumseiten
  • Blogseiten
  • Galerie-Seiten

Parallax Scrolling aktivieren oder deaktivieren

Wenn die Banner auf Ihrer Website nicht den Parallaxeffekt aufweisen, aktivieren Sie ihn in den Website-Stilen der Brine-Familie:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stile.
  2. Scrollen Sie nach unten zum Abschnitt Haupt: Overlay.
  3. Aktivieren Sie Parallax aktivieren.
  4. Sie können auch Parallax: Intelligentes Abschneiden aktivieren, um das Abschneiden zu minimieren.
  5. Klicken Sie auf Speichern

Um Parallax Scrolling für Ihre Website zu deaktivieren, führen Sie die gleichen Schritte aus, deaktivieren Sie aber Parallax aktivieren.

Vorschaubilder hinzufügen

Um den Parallaxeffekt zu erzeugen, fügen Sie Ihrer Seite oder Ihrem Abschnitt ein Vorschaubild hinzu:

  • Vorschaubilder, die einer Seite hinzugefügt werden, erstellen ein Banner 
  • Vorschaubilder, die zu Index-Inhaltsabschnitten hinzugefügt werden, erstellen ein Hintergrundbild.

Wenn Sie den Parallaxeffekt nicht sehen, vergewissern Sie sich, 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 können Sie folgende Inhalte mit Blöcken hinzufügen:

Einen Farbfilter hinzufügen

Sie können allen Bannern auf Ihrer 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: Aktivieren Sie 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, müssen Sie 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 Sie ist, sollten Sie Parallax deaktivieren

War dieser Beitrag hilfreich?
94 von 240 fanden dies hilfreich
Parallax Scrolling