So erstellen Sie bewegte Bildschatten beim Scrollen in Divi

In der Welt des Webdesigns stellen wir uns Schatten normalerweise als etwas vor, das wir in Photoshop hinzufügen können, oder als CSS-Eigenschaft (wie Box-Shadow oder Text-Shadow). Aber mit Divi können wir über den Tellerrand (oder Box-Shadow) hinaus denken. Mit nur wenigen Anpassungen an den integrierten Filter- und Bildlaufeffektoptionen von Divi können wir jedes Bild in einen lebensechten Schatten verwandeln.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi bewegte Bildschatten beim Scrollen erstellen. Der Trick besteht darin, ein PNG-Bild mit einer einzigartigen Form zu finden, damit das Bild nach der Transformation die Form behält und wie ein realistischer Schatten des Bildes aussieht. Nachdem das Bild/der Schatten fertig ist, können wir einige Scroll-Effekte hinzufügen, um den Schatten beim Scrollen des Benutzers zu verschieben. Dieser ungewöhnliche (aber vertraute) Effekt fügt ein atemberaubendes Designelement hinzu, das Ihrer Website neues Leben einhaucht.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Teil 1: Entwerfen des Abschnittslayouts

In diesem ersten Teil werden wir ein schnelles Abschnitts-Layout entwerfen, um den Schatten-Scroll-Effekt bei bewegten Bildern zu ergänzen.

Fügen Sie die zweispaltige Zeile hinzu

Fügen Sie zunächst eine zweispaltige Zeile zum regulären Abschnitt hinzu.

Fügen Sie das Textmodul hinzu

Fügen Sie in der linken Spalte einen neuen Textbaustein hinzu. Dies wird als unser simulierter Textinhalt dienen.

Textinhalt

Fügen Sie dann den folgenden HTML-Code in den Body-Inhalt ein:

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Textdesign

Aktualisieren Sie auf der Registerkarte Design die Einstellungen wie folgt:

• Text Textgröße: 16px
• Textzeilenhöhe: 2em

• Überschrift 2 Schriftart: comfortaa
• Überschrift 2 Textfarbe: #444235
• Überschrift 2 Textgröße: 60px (Desktop), 40px (Tablet)

Bilddesign-Akzent hinzufügen

Unter dem Textmodul fügen wir ein Bild hinzu, das als Designakzent zum Text dient. Wir werden das Bild eines Baumzweigs aus dem Holistic Healer Layout Pack verwenden. Dies ist das gleiche Bild, das wir später für unsere Bewegtbildschatten verwenden werden.

Bild hinzufügen

Fügen Sie unter dem Textmodul ein neues Bildmodul hinzu.

Dann lade das Bild hoch.

Bildgestaltung

Verringern Sie auf der Registerkarte „Design“ die Deckkraft des Bildes mithilfe der Filtereinstellungen.

• Deckkraft: 20%

Als nächstes verschieben Sie das Bild mit der folgenden Transformationsoption nach links und oben:

• Transformieren X-Achse verschieben: -20%
• Transformieren Y-Achse übersetzen: -90%

Bildposition

Geben Sie dem Bild dann eine absolute Position.

• Position: Absolut

Teil 2: Erstellen der Bewegtbildschatten

Sobald der simulierte Inhalt in der linken Spalte fertig ist, können wir mit der Erstellung des Bildes und der Schatten des bewegten Bildes beginnen.

Hauptbild hinzufügen

Fügen Sie in der rechten Spalte ein neues Bildmodul hinzu.

Laden Sie dann ein Bild mit einer Breite von mindestens 800 Pixeln hoch. Da wir einen Bewegtbildschatten eines Baumzweigs hinzufügen werden, ist es sinnvoll, ein Bild von irgendwo draußen zu verwenden.

Nehmen Sie dann den standardmäßigen unteren Rand unter dem Modul wie folgt heraus:

• Rand unten: 0px

Erstellen von Bewegtbildschatten 1

Jetzt können wir den ersten Bewegtbildschatten erstellen. Die Grundidee besteht darin, ein Bild im PNG-Dateiformat zu verwenden, damit der transparente Hintergrund des Bildes nicht angezeigt wird. Dann verwenden wir die Filtereffekte, um die Helligkeit, Deckkraft und Unschärfe anzupassen, um das Bild in einen Schatten zu verwandeln. Da das PNG-Bild eine einzigartige Form hat, behält auch der Schatten dieselbe Form.

Beginnen wir damit, das gleiche PNG-Bild eines Zweigs aus dem Holistic Healer Layout Pack hinzuzufügen.

Hier ist es…

Fügen Sie das Bildmodul unter dem Bild in der rechten Spalte hinzu.

Laden Sie dann das Bild in das Modul hoch.

Bildfilter

Aktualisieren Sie auf der Registerkarte "Design" die Filter, damit das Bild wie ein Schatten aussieht.

• Helligkeit: 0%
• Deckkraft: 25%
• Unschärfe: 8px

Bildposition

Dann geben Sie dem Bildschatten eine absolute Position, so dass er über dem Hauptbild oben sitzt.

Bildlaufeffekte

Um den Bildschatten zu verschieben, aktualisieren Sie die folgenden Bildlaufeffekte.

Unter der Registerkarte Horizontale Bewegung…

• Horizontale Bewegung aktivieren: JA
• Start-Offset: 0 (bei 0%)
• Mittlerer Offset: -3 (bei 50%)
• Endversatz: -6 (bei 100%)

Auf der Registerkarte „Skalieren nach oben und unten“…

• Skalierung nach oben und unten aktivieren: JA
• Startskala: 160% (bei 0%)
• Mittlere Skala: 160 % (bei 50 %)
• Endskala: 160% (bei 100%)

(HINWEIS: Dadurch wird der Schatten auf 160% vergrößert und während des gesamten Bildlaufeffekts dort gehalten. Sie können jedoch die Skalierungsprozentsätze an verschiedenen Stellen anpassen.)

Unter der Registerkarte Rotieren…

• Horizontale Bewegung aktivieren: JA
• Startrotation: 30° (bei 0%)
• Mittlere Drehung: 0° (bei 50%)
• Enddrehung: -30° (bei 100%)

Überprüfung des bisherigen Ergebnisses

An dieser Stelle können wir das bisherige Ergebnis anzeigen, indem wir dem Abschnitt vorübergehend den folgenden Rand hinzufügen, damit wir auf der Live-Seite nach unten scrollen können.

• Rand: 70vh oben, 70vh unten

So sieht der Effekt bisher aus.

Ausblenden des Spaltenüberlaufs

Um den Bildschatten in derselben Spalte des Hauptbilds zu enthalten, öffnen Sie die Einstellungen für Spalte 2 und aktualisieren Sie die Überlaufoptionen wie folgt:

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Sehen Sie sich nun das Ergebnis an.

Erstellen von Bewegtbildschatten 2

Sobald wir unseren ersten Bildschatten platziert haben, ist es einfach, einen weiteren zu erstellen. Alles, was wir tun müssen, ist, den vorhandenen Bildschatten zu duplizieren und die Scroll-Effekte zu aktualisieren. Die doppelten Bewegtbildschatten erzeugen einen schönen Enthüllungseffekt für das Bild.

Vorhandenen Bildschatten duplizieren

Duplizieren Sie das Schattenbild mit dem Ebenen-Modal.

Scroll-Effekte aktualisieren

Öffnen Sie dann die Einstellungen für das Duplikat und aktualisieren Sie die Scroll-Effekte wie folgt:

Unter der Registerkarte Horizontale Bewegung…

• Horizontale Bewegung aktivieren: JA
• Start-Offset: 0 (bei 0%)
• Mittlerer Offset: 3 (bei 50%)
• Endversatz: 6 (bei 100%)

Unter der Registerkarte Rotieren…

• Horizontale Bewegung aktivieren: JA
• Startrotation: 210° (bei 0%)
• Mittlere Drehung: 180° (bei 50%)
• Enddrehung: 150° (bei 100%)

Hier ist das Ergebnis…

Hinzufügen eines Zoom-In-Effekts zum Hauptbild

Da der Spaltenüberlauf ausgeblendet ist, können wir das Hauptbild beim Scrollen skalieren, um einen subtilen Zoom-In (oder Ken Burns-Effekt) zu erzeugen, der die Schatten des bewegten Bildes ergänzt.

Öffnen Sie dazu die Einstellungen für das Hauptimage und aktualisieren Sie Folgendes:

Auf der Registerkarte „Skalieren nach oben und unten“…

• Skalierung nach oben und unten aktivieren: JA
• Startskala: 100% (bei 0%)
• Mittlere Skala: 115 % (bei 50 %)
• Endskala: 130% (bei 100%)

Dadurch wird beim Scrollen des Benutzers ein Zoom-Effekt erzeugt.

Endergebnis

Und hier ist das Endergebnis.

Abschließende Gedanken

Ich hoffe, es hat Ihnen genauso viel Spaß gemacht, diese Bewegtbild-Schatten zu bauen wie für mich. Es ist ein einfaches, aber atemberaubendes Designelement, das das Potenzial für noch kreativere Ergänzungen hat. Fühlen Sie sich frei, verschiedene Farben, Mischmodi und andere Bildlaufeffekte hinzuzufügen, um das Design zu Ihrem eigenen zu machen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!