Kompatibilität:
Parallaxe-Effekt: WebSite X5 Evo und Pro seit Version 13
Parallaxe umgekehrt und fix: WebSite X5 Evo und Pro seit Version 14
Beim Online-Surfen haben Sie sicher Seiten gefunden, wo es ein großes Hintergrundbild gibt, das sich beim Scrollen mit unterschiedlicher Geschwindigkeit als die Inhalte im Vordergrund bewegt. Dieser Effekt heißt Parallaxe-Effekt und wir haben ihn für verschiedene Templates angewendet, z.B. Photogram oder Camping - SilverCamp. Sie können ihn jetzt anwenden, um die Seiten Ihres Projekts zu bereichern.
Mit WebSite X5 können Sie sogar einen Parallaxe-Effekt mühelos anwenden: Schauen Sie sich das Video oder lesen Sie weiter und lernen Sie, wie Sie vorgehen sollen.
Was ist der Parallaxe-Effekte und warum sollte ich ihn anwenden?
Der Parallaxe-Effekte ist eine visuelle Technik, um einen 3D-Tiefeneindruck zu schaffen und um Ihr grafisches Layout zu bereichern. Mit diesem Effekt bewegen sich die Bilder mit unterschiedlicher Geschwindigkeit und aus verschiedenen Perspektiven: Dadurch wird das Scrollen der Seite zu einer beeindruckenden Erfahrung für Ihre Besucher.
Der Effekt funktioniert so, als ob die Seiten auf 2 Ebenen bestehen würden: Der Hintergrund und der Vordergrund. Das Ergebnis verändert sich gemäß den folgenden Parametern:
- Richtung des Scrollens: Der Hintergrundbilder können sich auch aufwärts bewegen, aber die Inhalte im Vordergrund haben diese Möglichkeit nicht;
- Geschwindigkeit des Scrollens: Hintergrund und Vordergrund bewegen sich mit unterschiedlicher Geschwindigkeit;
- Die Tiefe, d.h. der „Zwischenraum“ zwischen der Ebenen des Hintergrunds und Vordergrunds. Je größer die Tiefe, desto mehr ist die unterschiedliche Geschwindigkeit des Scrollens zu sehen.
Mit dem Parallaxe-Effekte können Sie einzigartige Seiten bauen, die wichtigsten Inhalte hervorheben und das Surfen auf Ihrer Webseite wirksamer machen, weil Ihre Besucher höchstwahrscheinlich die sogenannten CTA anklicken werden, d.h. die Schaltfläche Call to Action, um eine bestimmte Aktion durchzuführen.
Wie vorbereite ich die Bilder?
Der Parallaxe-Effekte funktioniert korrekt, und die Besucher können die unterschiedliche Geschwindigkeit bemerken, nur wenn das Hintergrundbild höher als die Bande ist, wo es eingefügt wird. Je größer ist diese Differenz zwischen dem Bild und der Band, desto mehr ist der Effekt zu bemerken.
Wie stelle ich den Parallaxe-Effekt ein?
Jetzt sind Ihre Bilder bereit, und Sie sollen nur noch diese Schritte folgen, um einen Parallaxe-Effekt einzustellen:
- Wählen Sie auf Schritt 4- Erstellen der Seite die Seite, an der Sie arbeiten möchten
- Wählen Sie
Zeilenstil aus der Werkzeugleiste.
- Im Fenster Zeilenstil wählen Sie die Zeile, an der Sie arbeiten möchten.
- Stellen Sie ein Bild für den Bereich Hintergrund ein.
#Tipp - Hintergrund. Sie können eine Farbe, einen Verlauf, ein oder mehrere Bilder, ein Video oder eine Karte als Hintergrund einstellen. Die Parallaxe kann für farbige Hintergründe nicht aktiviert werden: Es ist tatsächlich nicht möglich, die Bewegung des Bildes im Vordergrund auf einer einheitlichen und monochromatischen Farbe zu sehen.
- Importieren Sie das gewünschte Hintergrundbild und ordnen Sie dieses im verfügbaren Bereich an.
- Aktivieren Sie die Option Auf die Breite des Browserfensters erweitern
. - Klicken Sie auf Parallaxe
und wählen Sie eine der verfügbaren Optionen, gemäß dem gewünschte Ergebnis:- Parallaxe: Hintergrundbild und Inhalte im Vordergrund bewegen sich in der gleichen Richtung;
- Parallaxe umgekehrt: Hintergrundbild und Inhalte im Vordergrund bewegen sich in gegenteiliger Richtung;
- Parallaxe fix: Hintergrundbild und Inhalte im Vordergrund bewegen sich mit gleicher Geschwindigkeit, sodass es scheint, dass das Bild sich nicht bewegt.
- Stellen Sie eine Tiefe ein, d. h. den Abstand zwischen dem Inhalt und dem Hintergrund.
- Klicken Sie auf OK, wann Sie fertig sind.
#Tipp Alternativen - Wenn Sie keinen horizontalen Band erstellen, sondern nur den Parallaxe-Effekt für ein einziges Bild definieren möchten, können Sie das Zusatzobjekt Parallax Image anwenden.