Das Erstellen einer Texthintergrund-Scroll-Animation ist eine einzigartige Möglichkeit, Ihrem Text farbenfrohe animierte Texturen hinzuzufügen. Website während ein Benutzer die Seite scrollt. Mit Divi, ist der Prozess überraschend einfach, sobald Sie ein paar Schlüsseltechniken gelernt haben.
In diesem Tutorial werden wir nur die Leistung der integrierten Parameter von verwenden Divi um 3 einzigartige Designs zu erstellen, die eine bunte Texthintergrund-Scrolling-Animation aufweisen. Wir zeigen Ihnen sogar, wie Sie eine dunkle Version jedes Designs für einen völlig neuen Look erstellen.
Lassen Sie uns beginnen!
Mögliches Ergebnis
Hier ist ein Blick auf die Entwürfe, die wir heute bauen werden.
Design 1: Texthintergrundverlauf mit horizontalem Bildlaufeffekt
Dieses erste Design bietet einen horizontalen Bildlaufeffekt, der ein farbiges Trennmodul hinter einem Textmodul mit dem Bildschirmfilter animiert.
Fügen Sie eine Spalte hinzu
Fügen Sie dem Standardabschnitt zunächst eine einspaltige Zeile hinzu.
Fügen Sie ein Textmodul hinzu
Fügen Sie dann der Spalte ein neues Textmodul hinzu.
Inhalt
Für den Inhalt Fügen Sie in der Spalte den folgenden HTML-Code in das Feld ein Inhalt:
Formatieren Sie den Text
Aktualisieren Sie dann das Textdesign wie folgt:
- Hintergrundfarbe: #ffffff
- Textschriftstil: TT
- Textfarbe: # 000000
- Textgröße: 100 px (Desktop), 40 px (Telefon)
- Textbuchstabenabstand: 0.15 em
- Höhe der Textzeile: 1em
- Textausrichtung: Mitte
- Titelschrift: Merriweather
- Schriftgröße des Titels: fett
- Titelschriftart: TT
- Ausrichtung des Kopfzeilentextes: Mitte
- Kopfzeilentextfarbe: # 000000
- Header-Textgröße: 200px (Desktop), 80px (Telefon)
- Titelbuchstabenabstand: 0.15 em
- Höhe der Titelzeile: 1em
Polsterung und Filter
Jetzt müssen wir dem Textmodul etwas Auffüllung und Bildschirmfilter hinzufügen. Der Filter wird benötigt, damit dieses Design funktioniert, da die Hintergrundfarben / Mods hinter dem Text angezeigt werden können.
Aktualisieren Sie Folgendes, um die Füllung und den Filter hinzuzufügen:
- Polsterung: 15px hoch, 20px niedrig
- Mischmodus: Bildschirm
Hinweis: Der Bildschirmmischmodus funktioniert am besten mit schwarzem Text auf weißem Hintergrund. Wenn wir weißen Text auf schwarzem Hintergrund verwenden möchten, verwenden wir den Mischmodus "Multiplizieren".
Oberer und unterer Separator
Sobald unser Textmodul fertig ist, fügen wir einige Trennzeichen (über und eines unter dem Textmodul) für ein zusätzliches Gestaltungselement hinzu.
Fügen Sie ein unteres Trennzeichen hinzu
Fügen Sie unter dem Textmodul ein neues Trennmodul hinzu.
Höhere Trennungseinstellungen
Öffnen Sie die Separatoreinstellungen und wählen Sie NEIN, um das Separator anzuzeigen.
Aktualisieren Sie dann den Hintergrund und geben Sie dem Teiler den gleichen Mischmodus wie das Textmodul wie folgt:
- Hintergrundfarbe des linken Farbverlaufs: # 000000
- Hintergrundfarbe mit Farbverlauf rechts: #ffffff
- Farbverlaufsrichtung: 90deg
- Startposition: 48%
- Endposition: 0%
- Mischmodus: Bildschirm
Aktualisieren Sie dann die Höhe des Teilers auf dem Telefonbildschirm wie folgt:
- Höhe: 15px (Telefon)
Fügen Sie das obere Trennzeichen hinzu
Um den oberen Teiler zu erstellen, duplizieren Sie den vorherigen unteren Teiler und ziehen Sie ihn über den Anzeigebereich der Ebenen über das Textmodul.
Invertieren Sie dann die Farben auf dem Verlaufshintergrund.
Zeilenparameter aktualisieren
Sobald unsere oberen und unteren Trennzeichen vorhanden sind, aktualisieren Sie die Zeilenparameter wie folgt:
- Dachrinnenbreite: 1 (um die unteren Ränder zwischen den Modulen zu entfernen)
- Maximale Breite: 600 Pixel (um ein kohärentes Design auf dem Desktop und dem Tablet zu erhalten)
- Linienausrichtung: Mitte
- Auffüllen: 0px hoch, 0px niedrig
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
Erstellen Sie ein Trennzeichen für die Hintergrundfarbe des animierten Textes
Das letzte Element dieses ersten Entwurfs ist der Teiler, mit dem wir die Hintergrundfarbe des Textes auf der Schriftrolle animieren. Fügen Sie dazu ein neues Trennmodul unter dem unteren Teiler hinzu.
Wählen Sie dann NEIN, um das Trennzeichen anzuzeigen.
Hintergrundteilereinstellungen
Aktualisieren Sie das Trennzeichen mit einem Verlaufshintergrund wie folgt:
- Hintergrundfarbe des linken Farbverlaufs: # e02b20
- Farbe des rechten Hintergrundverlaufs: # 8300e9
- Farbverlaufsrichtung: 90deg
- Startposition: 30%
- Endposition: 70%
Wir möchten, dass die Höhe des Trennzeichens hoch genug ist, um den gesamten Text im Textmodul sowie im oberen und unteren Trennzeichen einzufärben. Stellen Sie für dieses Design die Höhe auf 400px ein.
- Höhe: 400px
Geben Sie dem Teiler dann eine absolute Position, um ihn direkt über den anderen Modulen zu positionieren. Verwenden Sie den Z-Index, um den Teiler hinter den anderen Modulen zu platzieren.
- Position: Absolut
- Z-Index: -1
Hintergrund-Teiler-Scroll-Effekte
Wenn das Trennzeichen in Position ist, müssen wir es nur noch mit den Scroll-Effekten von hinter den Text verschieben Divi. Für dieses Design fügen wir der Schriftrolle einfach eine horizontale Bewegung hinzu.
Aktualisieren Sie die folgenden Elemente:
Unter der Registerkarte Horizontale Bewegung ...
Büro
- Horizontale Bewegung aktivieren: JA
- Startoffset: 6 (bei 20%)
- Durchschnittlicher Offset: 0 (bei 40% -60%)
- Endversatz: -6 (bei 80%)
Telefon
- Startoffset: 3
- Endversatz: -3
Stellen Sie außerdem sicher, dass Sie den Auslöser für den Bewegungseffekt in der Mitte des Clips einstellen:
- Bewegungseffekt auslösen: Mitte des Elements
Abschnittsabstand hinzufügen
Fügen Sie dem Abschnitt Folgendes hinzu, um einen temporären Bildlaufbereich zum Testen des Designs zu erstellen:
- Rand: 80vh oben, 80vh unten
Abschließende Gedanken
Die in diesem Artikel gezeigten Texthintergrund-Animationsdesigns funktionieren als statisches Design ohne die zusätzliche Bewegung auf der Schriftrolle. Die zusätzlichen Bildlaufeffekte bringen das Design jedoch auf eine ganz neue Ebene. Fühlen Sie sich frei, mit mehr Farben und Effekten zu experimentieren!
Ich freue mich darauf, von Ihnen in den Kommentaren zu hören.
Ihrer Gesundheit zuliebe!
