Ultimativer Leitfaden zur Verwendung von Parallaxe mit Divi

Der Versuch, die richtige Bildgröße für Parallaxe zu finden, kann ein wenig frustrierend sein. Das Bild mag als Standard-Hintergrundbild gut aussehen, aber sobald Sie "Parallaxe-Effekt verwenden" auswählen, wird das Bild aufgeblasen und nichts sieht richtig aus. Um diese Verschlimmerung in Zukunft zu vermeiden, müssen Sie verstehen, was Parallaxe ist und was mit dem Bild passiert, wenn es in den Parallax-Modus versetzt wird.

Heute werde ich tief in die Funktionsweise von Parallaxe mit Divi eintauchen. Ich werde genau erklären, was passiert, wenn Sie die beiden verschiedenen Parallax-Methoden verwenden, welche Bildgröße am besten ist, und ich werde sogar einige benutzerdefinierte CSS-Hacks einführen, um Ihre Bilder so zu positionieren, wie Sie sie möchten.

Lasst uns anfangen.

Was ist Parallaxe?

Im Webdesign bezeichnet Parallaxe einen Effekt, der in einer Art zweidimensionaler Animation eine lebensechte Distanz und Bewegung wahrnimmt. Dies wird erreicht, indem die Scrollgeschwindigkeit verschiedener Elemente auf einer Webseite geändert wird, um die Illusion von Entfernung zu erzeugen, während man einen festen Punkt betrachtet. Die Technik gibt es schon seit einiger Zeit an anderen Orten als im Internet. Erinnern Sie sich an Super Mario Brothers? Wenn Sie in den 80er Jahren jemals Videospiele gespielt haben (Nintendo NES), haben die meisten Spiele diese Technik verwendet, um den Eindruck von Bewegung zu erwecken, indem Sie nur 2D-Bilder verwenden. Die Gegenstände im Vordergrund bewegten sich schneller als die Bäume/Berge/Wolken im Hintergrund. So entsteht eine lebensechte Bewegung.

Dieser Effekt ähnelt der True Parallax-Methode in Divi. Außer dass die Bewegung vertikal statt horizontal ist.

Verstehen, wie Parallax mit Divi . funktioniert

Mit Divi lässt sich Parallax ganz einfach auf jedem Hintergrundbild innerhalb eines Abschnitts, einer Zeile, einer Spalte oder eines Moduls bereitstellen. Sie müssen lediglich die Option Parallax Effect auf „YES“ setzen und dann Ihre Parallax-Methode (CSS oder True Parallax) auswählen.

Die CSS-Methode

Die CSS-Methode ist eine von zwei Methoden, die Sie für Ihren Parallax-Effekt wählen können. Sie können wahrscheinlich erraten, was passiert, indem Sie diese Methode auf Ihrer Website testen. Es wird als CSS-Methode bezeichnet, weil es nur CSS verwendet, um den Effekt zu erzeugen. Diese Methode verwendet CSS, um das Hintergrundbild zu fixieren, während die anderen Elemente auf der Seite normal scrollen. Dadurch entsteht der Eindruck, dass sich der Inhalt vor dem Hintergrundbild bewegt.

Die wahre Parallaxenmethode

Die zweite Methode heißt True Parallax. Es wird wahrscheinlich „wahr“ genannt, weil es die konventionelle Idee des Parallax-Effekts veranschaulicht. Diese Methode verwendet CSS und JavaScript, um eine etwas langsamere Bildlaufbewegung zu erzeugen als die anderen Elemente auf der Seite. Dies ist eine lebensechtere Darstellung der Bewegung aufgrund der Wahrnehmung der Distanz, die zwischen dem sich langsam bewegenden Bild im Hintergrund und den sich schneller bewegenden Elementen im Vordergrund entsteht.

Was passiert, wenn Parallax in Divi aktiviert ist?

Dies kann frustrierend sein, wenn Sie nicht verstehen, was hinter den Kulissen vor sich geht. Daher ist es hilfreich, genau zu wissen, was mit dem Bild passiert, wenn die Parallaxe aktiviert ist.

Was passiert, wenn die CSS-Methode ausgewählt ist?

Wenn CSS Parallax ausgewählt ist, wird das Bild in ein neues div mit einer absoluten Position eingeschlossen, die die volle Größe des Browserfensters umfasst. Hier sind die CSS-Klassen und Code-Schnipsel, die dies in Divi tun:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Da die Hintergrundgröße auf „cover“ mit einer Höhe und Breite von 100% gesetzt ist, wird das Bild immer jeden Teil seines Containers „bedecken“. In diesem Fall ist der Container das Browserfenster. Dies bedeutet, dass Teile des Bildes hinter anderen Inhaltsabschnitten verborgen werden, da sich das Hintergrundbild mit der Größe des Browserfensters immer weiter ausdehnt und zusammenzieht.

Stellen Sie sich vor, dies ist ein normales Hintergrundbild, das einem Kopfzeilenmodul oben auf einer Seite hinzugefügt wird.

Das Seitenverhältnis des Bildes ist korrekt (1920 × 1080) und die Größe des Bildes deckt und passt gut in den Abschnitt ohne Überlappung, wenn es auf einer Bildschirmgröße von 1366 × 766 angezeigt wird. Der weiße Bereich unter dem Bild ist der restliche Inhalt der Seite.

Dies geschieht nun, wenn Sie Parallaxe für Ihr Bild auswählen.

Wie Sie sehen, wird das Bild sowohl vertikal (um den unteren Rand des Browserfensters zu erreichen) als auch horizontal (um das Seitenverhältnis des Bildes beizubehalten) erweitert. Das schwarze Quadrat stellt Ihren Monitor dar, sodass der Betrachter alles innerhalb des schwarzen Quadrats sieht. Den weißen Inhaltsbereich unten habe ich halbtransparent gemacht, damit Sie sehen können, wo sich das Hintergrundbild dahinter versteckt. Dort bleibt das Bild beim Scrollen fixiert und andere Elemente bewegen sich vor dem Bild auf und ab.

Was passiert, wenn die True Parallax-Methode ausgewählt wird?

Wenn Sie True Parallax eingestellt haben, wird das Bild in ein neues div mit derselben CSS-Klasse verpackt:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Durch die Verwendung von etwas JavaScript wird die Höhe und Position des Bildes jedoch dynamisch basierend auf der Größe des Browserfensters und beim Herunterscrollen der Seite eingestellt. Die beiden Werte, die dem Hintergrundbild dynamisch hinzugefügt werden, sind der px-Wert für die Eigenschaft height und der Wert translate für die Eigenschaft transform. Der Wert der Eigenschaft height bestimmt die Höhe des Bildes, während der Wert der transform-Eigenschaft translate die genaue Positionierung des Bildes auf der Seite gemäß der x- und y-Achse bestimmt.

Hier ist der Code, der in das Image-Tag meines Parallax-Hintergrundbilds eingefügt wird, wobei mein Browserfenster 1366 × 766 groß ist:

    height: 960.8px;
    transform: translate(0px, 220.5px);

Beachten Sie die beiden Zahlen in der Eigenschaft transform. Diese beiden Zahlen steuern die Positionierung des Hintergrundbildes. Die erste Zahl (0px) positioniert das Bild entlang der x-Achse (horizontal). Da es auf 0px gesetzt ist, wird das Bild nicht verschoben. Die zweite Zahl positioniert das Bild entlang der y-Achse (vertikal). Da es derzeit 220.5px beträgt, bedeutet dies, dass das Bild auf der Seite 220.5px nach unten verschoben wird.

Beachten Sie auch, dass der Höhenwert (960,8 Pixel) um etwa 200 Pixel größer ist als die Höhe meines Browserfensters (766 Pixel). Dies dient dazu, das Bild 220.5px über den unteren Rand des Browserfensters hinaus zu verschieben.

Wenn die True Parallax-Methode ausgewählt ist, haben Sie vielleicht bemerkt, dass Ihr Bild noch stärker als bei der CSS-Methode aufgeblasen wird. Dies liegt daran, dass die Position des Bildes um zusätzliche 30% der Browserhöhe gestreckt wird.

Erinnern Sie sich an unsere regelmäßige Hintergrundillustration?

Folgendes passiert mit dem Bild, nachdem True Parallax ausgewählt wurde (natürlich bevor Sie mit dem Scrollen beginnen):

Wie Sie sehen, wird das Bild etwas weiter unten im Browserfenster gezogen. Dieses Browserfenster ist ungefähr 1080×700 groß, also ziemlich klein, aber ich wollte Ihnen zeigen, was in einem kleineren Desktop-Fenster passiert.

Warum streckt True Parallax das Bild so weit?

Nun, meine beste Vermutung ist, für größere Bildschirmgrößen geeignet zu sein. Sobald das Browserfenster eine Bildschirmgröße von 1920×1080 erreicht hat, reicht das Hintergrundbild nicht mehr über den unteren Rand des Fensters hinaus und passt gut.

Warum verwendet True Parallax JavaScript?

Der Hauptgrund, warum True Parallax JavaScript erfordert, ist, dass sich das Hintergrundbild beim Scrollen mit einer anderen Geschwindigkeit bewegen muss als die anderen Elemente. Erinnern Sie sich an Mario Brothers?

Wenn ich mit True Parallax die Größe meines Browsers vergrößere, erhöht sich auch der Höhenwert dynamisch durch JavaScript, um sicherzustellen, dass mein Bild immer groß genug für den Browser ist.

Wenn ich auf der Seite nach unten scrolle, erhöht sich der Positionswert (im obigen Beispiel 220.5px) und verschiebt die vertikale (y-Achse) Position des Bildes auf der Seite nach unten.

Wenn ich nach oben scrolle, verringert sich der Positionswert für die Übersetzung, wodurch das Bild auf der Seite wieder nach oben gezogen wird. Da das Bild beim Scrollen jedoch mit einer anderen Geschwindigkeit nach unten und oben gezogen wird als die anderen Elemente, erhalten Sie den True Parallax-Effekt.

Welche Art von Bild soll ich verwenden?

Wenn Sie den Parallax-Effekt auf Ihrer Website nutzen möchten, ist die Wahl des richtigen Hintergrundbildes entscheidend. Sie möchten nicht, dass der Hintergrund zu überladen oder ablenkend ist. Aber andererseits soll es auch keine langweilige Randnotiz sein.

Hier sind 5 allgemeine Tipps zur Auswahl der richtigen Bildart für Parallaxe

1. Vermeiden Sie störende Fotos. Bilder, mit denen zu viel los ist, schaffen Verwirrung und lenken vom Inhalt ab.
2. Stellen Sie sicher, dass Ihr Foto zum Thema Ihrer Website passt. Ihre Website sollte eine Geschichte erzählen. Dieses Parallax-Bild (wie der Rest Ihrer Bilder) sollte zum Thema passen.
3. Halten Sie es groß und einfach. Denken Sie daran, dass Ihr Parallaxenbild auch auf kleineren Bildschirmgrößen angezeigt wird. Stellen Sie sicher, dass die Details des Fotos nicht so klein sind, dass sie auf kleineren Geräten nicht erkannt werden können.
4. Fügen Sie bei Bedarf eine Überlagerungsfarbe hinzu. Manchmal hat ein gutes Parallaxenbild sowohl dunkle als auch helle Aspekte, die Ihren Text beim Scrollen möglicherweise verbergen. Das Hinzufügen einer dunklen oder hellen Überlagerung garantiert, dass Ihr Text überall auf dem Bild gelesen werden kann
   
5. Machen Sie es interessant. Es gibt viele Fotos, um sich mit etwas Langweiligem zufrieden zu geben. Nehmen Sie sich die Zeit, um einen zu finden, der Ihr Publikum anspricht und seine Aufmerksamkeit erregt.

Welche Größe des Parallax-Hintergrundbilds sollten Sie verwenden?

Diese Frage ist etwas schwierig zu beantworten. Es gibt keine Einheitsgröße für alle Parallaxenbilder. Tatsächlich gibt es im Webdesign keine Einheitsgröße, zumindest nicht seit es Responsive Design gibt. Aber auch wenn ich Ihnen vielleicht keine feste Regel geben kann, kann ich einige allgemeine Richtlinien für die Auswahl der Parallax-Hintergrundbilder in der richtigen Größe mit Divi geben.

Da die beliebteste Bildschirmgröße etwa 1366 × 766 beträgt, würde ich auf jeden Fall sicherstellen, dass alle Parallax-Hintergrundbilder mindestens diese Größe haben. Aber wegen der Popularität größerer Monitore würde ich eine größere Größe wie 1920 × 1080 wählen. Dadurch wird sichergestellt, dass Benutzer auf größeren Desktops ein qualitativ hochwertiges Bild sehen.

Das Problem bei einem Bild mit den Maßen 1920×1080 ist, dass Sie selten einen sichtbaren Bereich mit einer Höhe von 1080px haben. Sie können sich also darauf verlassen, dass die unteren Bilder verborgen bleiben.

Hilfreiche Tipps, damit Ihr Parallax-Hintergrundbild richtig aussieht

Für Kopfzeilen und obere Abschnitte

Der einfachste Weg, um sicherzustellen, dass Ihr Bild vollständig sichtbar ist und gut aussieht, ist die Verwendung des Fullwidth Header-Moduls. Auf diese Weise wird Ihr Hintergrundbild unabhängig von der Bildschirmgröße immer gut aussehen. Wenn Sie jedoch ein Parallax-Hintergrundbild mit dem Fullwidth Header-Modul verwenden, müssen Sie möglicherweise oben und unten im Modul etwas Auffüllung hinzufügen, um mehr vom Bild anzuzeigen. Sie können dies tun, indem Sie den Visual Builder verwenden. Gehen Sie zu den Header-Modul-Einstellungen. Geben Sie auf der Registerkarte „Erweitert“ Folgendes in das Textfeld „Hauptelement“ ein:

Padding: 250px 0 250px;

Damit solltest du in die richtige Richtung gehen.

Wenn Sie immer noch nicht genug von dem angezeigten Bild haben, würde ich vorschlagen, den oberen Teil Ihres Bildes zuzuschneiden und es dann erneut hochzuladen. Dies kann helfen.

Versuchen Sie auch, Fotos mit unbedeutenden Inhalten unten im Bild und wichtigeren Inhalten oben auszuwählen. Bei Headern sollten Sie nur die oberen 700px des Parallax-Bildes erwarten.

Für normale/mittlere Abschnitte

Stellen Sie sicher, dass Sie um Ihren Inhalt herum genügend Platz lassen, um den Hintergrund ausreichend freizulegen, damit Sie ein vollständiges Bild erhalten, wenn der Abschnitt den mittleren Blickwinkel des Benutzers erreicht. Nutzen Sie die Polsterung zu Ihrem Vorteil. Wenn Sie Parallaxe verwenden, lassen Sie Ihre Benutzer nicht verwirren und müssen nach oben und unten scrollen, nur um zu sehen, was das Bild ist. Es ist besser, sie beim ersten Mal zu zeigen.

Für untere Abschnitte/Fußzeilen

Wenn Sie die CSS-Methode verwenden, können Sie davon ausgehen, dass Sie mehr vom unteren Rand Ihres Hintergrundbilds sehen (je nachdem, wie viel Platz Sie haben). Ich würde versuchen, den unteren Teil des Fotos zu beschneiden, um mehr von der Spitze in diesen Abschnitten zu zeigen.

Wenn Sie die True Parallax-Methode verwenden, sehen Sie hauptsächlich den oberen Teil Ihrer Bilder, daher würde ich sie wie Ihre Kopfzeilen behandeln.

Hier ist ein Beispiel für True Parallax Hintergrundbilder oben, in der Mitte und unten auf der Seite.

Diese Art von Bild einer Brücke funktioniert gut, weil es einen schönen Fokus an der Seite hat und der untere Teil des Bildes nicht so wichtig ist wie der obere, sodass die Nachricht für den Benutzer nie verloren geht.

Hier ist dieselbe Seite mit der CSS-Methode. Sie können wirklich sehen, dass das Hintergrundbild fixiert ist und sich auf das Browserfenster ausdehnt. Es sieht sogar so aus, als wäre es die ganze Zeit dasselbe Bild im Hintergrund.

Wenn Sie nach der Suche nach dem perfekten Bild, dem Hinzufügen der erforderlichen Auffüllung und dem Zuschneiden immer noch nicht zufrieden sind, können Sie jederzeit auf Hacking zurückgreifen.

Parallax Image Hacks: Ändern der Position des Bildes mit benutzerdefiniertem CSS

Wenn Sie die Position des Parallax-Hintergrunds ändern möchten, können Sie den CSS-Selektor „.et_parallax_bg“ verwenden. Hier ist das Standard-CSS, das das Bild für den Parallax-Effekt positioniert.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Wenn Sie feststellen, dass die Hintergrundpositionseigenschaft für die CSS-Parallaxemethode standardmäßig wie folgt lautet, ist „oben in der Mitte“ eingestellt. Wenn ich jedoch die ursprüngliche Position des Hintergrundbilds ändern möchte, können Sie die Eigenschaftswerte der background-position anpassen.

Wenn Sie Ihr benutzerdefiniertes CSS auf ein bestimmtes Bild verdichten möchten und nicht Ihren gesamten Parallax-Hintergrund beeinflussen möchten, müssen Sie Ihrem Abschnitt eine Klasse hinzufügen, damit wir im CSS erkennen können, welchen Hintergrund wir anpassen müssen.

Gehen Sie zu den Abschnittseinstellungen auf der Registerkarte Erweitert und geben Sie eine CSS-Klasse namens "parahacks" ein.
Gehen Sie nun zu Seiteneinstellungen und wählen Sie die Registerkarte Erweitert.

Verwenden Sie dann das Feld Benutzerdefiniertes CSS, um eines der folgenden Beispiele für benutzerdefiniertes CSS einzugeben:

Wenn Sie die CSS-Methode verwenden, können Sie das Hintergrundbild vertikal zentrieren, indem Sie das folgende benutzerdefinierte CSS hinzufügen:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Um das Hintergrundbild unten auszurichten, fügen Sie das folgende benutzerdefinierte CSS hinzu:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Um das Hintergrundbild um eine bestimmte Anzahl von Pixeln nach oben zu verschieben, fügen Sie das folgende benutzerdefinierte CSS hinzu:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

Wenn Sie die True Parallax-Methode verwenden, müssen Sie die zusätzlichen 220 Pixel (je nach Browserhöhe mehr oder weniger) des Bildes berücksichtigen, die unten verborgen sind. Um das Hintergrundbild vertikaler zu zentrieren, müssen Sie die Eigenschaft background-position mit einem negativen Pixelwert wie folgt anpassen:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Um das Hintergrundbild weiter unten auszurichten, fügen Sie das folgende benutzerdefinierte CSS hinzu:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL;DR? Hier ist eine Videozusammenfassung der wichtigsten Punkte

Abonnieren Sie unseren Youtube-Kanal

Abschließend

Ich hoffe aufrichtig, dass dieser Leitfaden hilfreich war, um ein tiefes Verständnis dafür zu erlangen, wie Parallaxe mit Divi funktioniert. Zum Glück erledigt Divi fast die ganze schwere Arbeit, um uns die Parallax-Funktionalität zu bieten. Sowohl die CSS-Methode als auch die True Parallax-Methode erzeugen sofort großartige lebensechte Effekte. Es liegt jedoch an uns, die richtigen Bilder zu finden und sie genau richtig zu optimieren, damit sie für unsere Website funktionieren. Tue es! Ich wette, Sie werden etwas Erstaunliches schaffen.

Freue mich von dir in den Kommentaren zu hören.

Danke schön!