Kompatibilität:

WebSite X5 Evo und Pro

Möchten Sie einen Bereich erstellen, in dem sich das Hintergrundbild beim Scrollen mit einer anderen Geschwindigkeit als die Inhalte im Vordergrund bewegt?


Mit dem Parallax-Effekt können Sie der Seite mehr Tiefe verleihen und einen Abschnitt während der Navigation hervorheben. In WebSite X5 können Sie den Effekt auf den Hintergrund eines Abschnitts anwenden und zwischen Parallax, umgekehrtem Parallax und festem Parallax wählen.


Was ist Parallax und warum sollte man den Effekt verwenden?

Der Parallax-Effekt nutzt die unterschiedliche Bewegung des Hintergrunds und der Inhalte im Vordergrund, um beim Scrollen ein Gefühl von Tiefe zu erzeugen.


In WebSite X5 können Sie zwischen drei Effekttypen wählen:

  • Parallax: Das Hintergrundbild bewegt sich in dieselbe Richtung wie die Inhalte im Vordergrund, jedoch mit einer anderen Geschwindigkeit;
  • Umgekehrter Parallax: Das Hintergrundbild bewegt sich in die entgegengesetzte Richtung zu den Inhalten;
  • Fester Parallax: Der Hintergrund scheint festzustehen, während die Inhalte darüber scrollen.


Sie können außerdem die Tiefe einstellen, also den wahrgenommenen Abstand zwischen dem Hintergrund und den Inhalten im Vordergrund: Durch Ändern dieses Werts können Sie den Effekt stärker oder schwächer hervorheben.



So wählen Sie das Hintergrundbild aus

Damit die Bewegung des Parallax-Effekts wahrnehmbar ist, müssen die als Hintergrund verwendeten Bilder höher sein als der Bereich, in dem sie angezeigt werden. Im Allgemeinen gilt: Je größer der Unterschied zwischen der Höhe des Hintergrundbilds und der Höhe des Bereichs ist, desto deutlicher wird der Parallax-Effekt sichtbar.


Prüfen Sie außerdem, ob das Bild eine ausreichende Qualität hat, damit es in der vorgesehenen Größe ohne Qualitätsverlust dargestellt werden kann.



So stellen Sie den Parallax-Effekt ein 

Um den Parallax-Effekt auf den Hintergrund eines Abschnitts anzuwenden, gehen Sie wie folgt vor:

  • Gehen Sie zu Schritt 4 - Seiten und öffnen Sie die Seite, an der Sie arbeiten möchten.
  • Stellen Sie sicher, dass die betreffenden Inhalte in dem Abschnitt organisiert sind, auf den Sie den Effekt anwenden möchten.
  • Klicken Sie auf die Schaltfläche Abschnittsstil.
  • Wählen Sie den Abschnitt aus, den Sie anpassen möchten.
  • Wählen Sie im Menü Hintergrund die Option Bild.
  • Importieren Sie das Bild, das Sie verwenden möchten, und legen Sie die entsprechenden Einstellungen fest.
  • Klicken Sie auf die Schaltfläche Parallax.
  • Wählen Sie im geöffneten Fenster den gewünschten Effekt aus:
    • Parallax;
    • Umgekehrter Parallax;
    • Fester Parallax.
  • Stellen Sie die Tiefe ein, um die Intensität des Effekts anzupassen. 
  • Bestätigen Sie die Einstellungen.


#tip - Der Parallax-Effekt basiert auf der Bewegung des Hintergrunds und ist bei einem einfarbigen, gleichmäßigen Hintergrund nicht wahrnehmbar.


So erweitern Sie den Hintergrund auf die gesamte Breite

Für den Parallax-Effekt muss der Bereich nicht unbedingt die gesamte Breite des Browserfensters einnehmen.


Wenn Sie dieses Ergebnis jedoch erzielen möchten, aktivieren Sie im Fenster Abschnittsstil zusätzlich Auf die Breite des Browserfensters erweitern.


Auf diese Weise wird der Hintergrund des Abschnitts einschließlich des Parallax-Effekts bis an die Ränder des Fensters erweitert, während die Objekte weiterhin entsprechend der Struktur des Layout-Rasters angeordnet bleiben.


#tip - Weitere Informationen finden Sie unter Wie erstellt man einen Bereich über die gesamte Breite?


Barrierefreiheit

Um die Seiten Ihrer Website barrierefrei zu gestalten, sollten Sie für die verwendeten Bilder einen Alternativtext vorsehen.


Sie können ein Bild als dekorativ kennzeichnen oder über die Schaltfläche im Feld, in dem Sie die Datei importieren, einen ALT-Text eingeben.


#tip - Weitere Informationen finden Sie unter So schreiben Sie Alternativtexte für nicht-textuelle Inhalte auf Seiten.


Praktische Tipps

Für ein gutes Ergebnis:

  • wählen Sie ausreichend große Bilder in guter Qualität;
  • stellen Sie die Tiefe so ein, dass die Bewegung wahrnehmbar ist, ohne übertrieben zu wirken;
  • vermeiden Sie es, den Parallax-Effekt auf zu viele Abschnitte derselben Seite anzuwenden;
  • prüfen Sie, dass Texte und andere Inhalte vor dem Hintergrund gut lesbar bleiben;
  • kontrollieren Sie das Ergebnis immer in der Vorschau und bei unterschiedlichen Größen des Browserfensters.


#tip - Alternativen. Wenn Sie den Parallax-Effekt nicht auf den Hintergrund eines Abschnitts, sondern auf ein einzelnes Bild anwenden möchten, das in die Seite eingefügt wurde, probieren Sie das optionale Objekt Parallax Image.