So stapeln und animieren Sie Text mit Divi-Scroll-Effekten

Die Verwendung der Scroll-Effekte von Divi zum Stapeln und Animieren von Text beim Scrollen ist eine einzigartige Designtechnik, mit der Sie Ihre Seitenüberschriften zum Leben erwecken können. Der Trick besteht darin, die Positionsoptionen von Divi zu verwenden, um Buchstaben absolut so zu stapeln, dass sie direkt übereinander sitzen. Anschließend können Sie die Buchstaben mithilfe der Scroll-Effekte horizontal und vertikal verschieben.

Hör zu!

Vorgeschmack

Hier ist ein kurzer Blick auf die Textanimation, die wir in diesem Tutorial erstellen werden.

Abonnieren Sie unseren Youtube-Kanal

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 Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

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.

So stapeln und animieren Sie Text in Divi

Abschnitt und Reihe einrichten

Erstellen Sie zunächst eine einspaltige Zeile zum regulären Abschnitt.

Abschnittseinstellungen

Öffnen Sie vor dem Hinzufügen von Modulen die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe: rgba(201,245,255,0.35)
• Polsterung: 14vw oben, 14vw unten

Zeileneinstellungen

Öffnen Sie als Nächstes die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Maximale Breite: 60%
• Zeilenausrichtung: Mitte
• Höhe: 20vw

Wir setzen die Höhe auf einen bestimmten Wert, weil wir die Textmodule absolut innerhalb der Zeile positionieren werden.

Hinzufügen der gestapelten Textmodule, die auf Stroll animieren

Nachdem der Abschnitt und die Zeile nun eingerichtet sind, können wir damit beginnen, die Textmodule hinzuzufügen, aus denen unser Überschriftendesign besteht. Das erste Textmodul enthält den Hauptüberschriftentext. Die nächsten drei Textmodule enthalten einen einzelnen Buchstaben, der verwendet wird, um über den ersten Buchstaben der Überschrift zu stapeln und dann beim Scrollen zu animieren.

Beginnen wir damit, das Textmodul mit der Hauptüberschrift hinzuzufügen.

Textmodul #1 hinzufügen

Fügen Sie der Zeile einen neuen Textbaustein hinzu.

Aktualisieren Sie anschließend den Textbaustein mit den folgenden Inhalten.

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

• Textschriftart: Bungee-Haarlinie
• Schriftstärke des Textes: Fett
• Text Textgröße: 4vw
• Textzeilenhöhe: 1.5em
• Überschrift 2 Schriftart: Bungee Shade
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textfarbe:
• Überschrift 2 Textgröße: 12vw
• Breite: 100%

• Position: Absolut

Textmodul #2 hinzufügen

Der nächste Textbaustein wird als erster Buchstabe verwendet, um den ersten Buchstaben der Überschrift zu überlappen. Um das Design des Textmoduls zu beschleunigen, duplizieren Sie das erste Textmodul.

Aktualisieren Sie dann den Inhalt des doppelten Textbausteins mit dem ersten Buchstaben des Überschriftentextes („D“).

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Textschriftart: Bungee Shade
• Schriftstärke des Textes: Fett
• Text Textfarbe: rgba(83,144,193,0.3)
• Text Textgröße: 12vw
• Textzeilenhöhe: 1em

Scroll-Effekte

Der Textbaustein mit dem Buchstaben „D“ wird nun direkt auf den Buchstaben „D“ im ersten Textbaustein gestapelt. Wir werden den Buchstaben beim Scrollen leicht verschieben, indem wir eine Kombination aus vertikaler und horizontaler Bewegung verwenden.

Vertikale Bewegung

Wählen Sie auf der Registerkarte „Erweitert“ die Registerkarte „Vertikale Bewegung“ aus und aktualisieren Sie Folgendes:

• Vertikale Bewegung aktivieren: JA
• Startversatz: 0 (bei 20%)
• Mittlerer Offset: -0,5 (zwischen 40% und 60%)
• End-Offset: 0 (bei 80%)

Wenn Sie noch nicht mit den Scrolleffekt-Optionen in Divi vertraut sind, geben die oberen Prozentwerte die Positionspunkte innerhalb des Browserfensters an. Jeder Prozentwert entspricht den untenstehenden Offsets (Anfang, Mitte und Ende). Wenn der Benutzer scrollt, beginnt die Animation des Buchstabens „D“ (ab einem Anfangsversatz „0“), wenn er 20 % vom unteren Rand des Ansichtsfensters erreicht. Es wird weiterhin (nach oben) animiert, bis es 40 % vom unteren Rand des Ansichtsfensters erreicht und dann beim Versatz „-0,5“ gehalten wird, bis es 60 % vom unteren Rand des Ansichtsfensters erreicht. Sobald der 60 %-Punkt erreicht ist, beginnt die Animation zurück zum ursprünglichen Offset „0“ und stoppt die Animation, wenn sie 80 % vom unteren Rand des Ansichtsfensters erreicht.

Horizontale Bewegung

Um dem Textmodul eine horizontale Bewegung zu geben, wählen Sie die Registerkarte Horizontale Bewegung aus und aktualisieren Sie Folgendes (die Werte entsprechen denen der vertikalen Bewegung):

• Horizontale Bewegung aktivieren: JA
• Startversatz: 0 (bei 20%)
• Mittlerer Offset: -0,5 (zwischen 40% und 60%)
• End-Offset: 0 (bei 80%)

Textmodul #3 hinzufügen

Erstellen Sie das dritte Textmodul (oder den Buchstaben „D“), indem Sie das vorherige Textmodul duplizieren.

Scroll-Effekte aktualisieren

Aktualisieren Sie dann die folgenden Bildlaufeffekte.

Vertikale Bewegung

• Mittlerer Versatz: -1

Horizontale Bewegung

• Mittlerer Versatz: 1

Textfarbe aktualisieren

Aktualisieren Sie die Textfarbe wie folgt:

• Text Textfarbe: rgba(83,144,193,0.5)

Textmodul #4 hinzufügen

Die Auswahl in der Desktop-Ansicht kann an dieser Stelle schwieriger werden. Stellen Sie den Drahtmodell-Ansichtsmodus bereit und duplizieren Sie das vorherige Textmodul, um unseren letzten Brief zu erstellen.

Textfarbe aktualisieren

Aktualisieren Sie die Textfarbe wie folgt:

• Text Textfarbe: #5390c1

Scroll-Effekte aktualisieren

Springen Sie dann zur Registerkarte Erweitert und passen Sie die Bildlaufeffekte wie folgt an:

Vertikale Bewegung

• Mittlerer Versatz: -1.5

Horizontale Bewegung

• Mittlerer Versatz: 1,5

Rand zum Testbereich hinzufügen

Um das Design auf einer Live-Seite zu testen, benötigen Sie etwas Platz zum Scrollen. Wir können dies leicht tun, indem wir dem Abschnitt einen oberen und unteren Rand hinzufügen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Rand: 40vw oben, 40vw unten

Endergebnis

Jetzt können wir uns endlich das Endergebnis auf einer Live-Seite ansehen.

Hier ist es auf dem Handy.

Fühlen Sie sich frei, mit verschiedenen Schriftarten zu experimentieren, indem Sie die Funktion zum Suchen und Ersetzen von Divi verwenden.

Abschließende Gedanken

Dieser Beitrag sollte Ihre Kreativität zum Laufen bringen, um neue Möglichkeiten zum Animieren von Text beim Scrollen zu finden. Dies funktioniert gut für Abschnittsüberschriften, da der Benutzer durch den Abschnitt scrollen muss (von oben nach unten) und die volle Dauer des Scroll-Effekts erleben muss.

Und wenn man sich das vorstellt, würde das gleiche Konzept auch für Bilder und Symbole funktionieren.

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

Danke schön!