So fügen Sie mit Letterize.js & Anime.js erweiterte Textanimationen in Divi hinzu

Veröffentlicht: 2020-09-07

Die integrierten Animationen von Divi bieten unzählige Möglichkeiten, um Ihrer Website einen zusätzlichen Vorteil zu verleihen. Mit diesen Animationen können Sie jedoch jeweils eine Animation zu einem Container hinzufügen. In den meisten Fällen ist dies in der Regel mehr als genug, aber es gibt Projekte, bei denen Sie die Extrameile gehen möchten. Vielleicht möchten Sie beispielsweise erweiterte Textanimationen hinzufügen. In diesem Tutorial zeigen wir Ihnen genau, wie das geht. Dieses Tutorial ist ein großartiges Sprungbrett, wenn Sie lernen möchten, wie man Divi als Framework mit externen Javascript-Bibliotheken kombiniert. Wir erstellen unser gesamtes Design mit den integrierten Elementen und Optionen von Divi und richten dann unser Textmodul mit den Bibliotheken letterize.js und anime.js aus, um erweiterte Textanimationen zu erstellen. Sobald Sie den Ansatz verstanden haben, können Sie jede Art von fortgeschrittener Textanimation erstellen, die Sie sich vorstellen können!

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

erweiterte Textanimationen

Handy, Mobiltelefon

erweiterte Textanimationen

Laden Sie das erweiterte Textanimations-Layout KOSTENLOS herunter

Um das kostenlose erweiterte Textanimationslayout 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.

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!

1. Erstellen Sie ein Heldenabschnittsdesign

Neuen Abschnitt hinzufügen

Abstand

Beginnen Sie damit, eine neue Seite zu erstellen oder eine vorhandene zu öffnen. Fügen Sie auf Ihrer Seite einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie den oberen und unteren Abstand für verschiedene Bildschirmgrößen.

Obere Polsterung: 180px (Desktop), 100px (Tablet), 50px (Telefon)
Untere Polsterung: 180 Pixel (Desktop), 100 Pixel (Tablet), 50 Pixel (Telefon)

erweiterte Textanimationen

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

erweiterte Textanimationen

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und entfernen Sie alle standardmäßigen unteren Auffüllungen.

Untere Polsterung: 0px

erweiterte Textanimationen

Textmodul Nr. 1 zur Spalte hinzufügen

H1-Kopie hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul. Fügen Sie H1-Inhalte Ihrer Wahl hinzu.

erweiterte Textanimationen

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H1-Texteinstellungen wie folgt:

Überschrift Schriftart: Montserrat
Überschriftstextfarbe: rgba(232,232,232,0.41)
Überschriftstextgröße: 80px (Desktop), 50px (Tablet), 40px (Telefon)
Kopfzeilenabstand: -10px (Desktop), -4px (Tablet), -3px (Telefon)
Überschriftszeilenhöhe: 0.6em (Desktop), 0.7em (Tablet), 0.8em (Telefon)

erweiterte Textanimationen

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie eine weitere Zeile direkt unter der vorherigen hinzu, indem Sie die folgende Spaltenstruktur verwenden:

erweiterte Textanimationen

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die maximale Breite in den Größeneinstellungen.

Maximale Breite: 1680px

erweiterte Textanimationen

Abstand

Entfernen Sie als nächstes alle unteren Ränder und Auffüllungen.

Unterer Rand: 0px
Untere Polsterung: 0px

erweiterte Textanimationen

Bildmodul zur Spalte hinzufügen

Illustration hochladen

Fügen Sie dann ein Bildmodul hinzu und laden Sie die kostenlose Illustration hoch, die Sie in dem Ordner finden, den Sie zu Beginn dieses Beitrags herunterladen konnten.

erweiterte Textanimationen

Größe

Wechseln Sie zur Design-Registerkarte des Moduls und erzwingen Sie die volle Breite des Bildes.

Volle Breite erzwingen: Ja

erweiterte Textanimationen

Abstand

Fügen Sie als nächstes einen negativen unteren Rand hinzu.

Untere Marge: -12%

erweiterte Textanimationen

Animation

Und vervollständigen Sie die Moduleinstellungen, indem Sie die folgenden Animationseinstellungen hinzufügen:

Animationsstil: Ausblenden
Animationsverzögerung: 3000ms

erweiterte Textanimationen

Zeile 3 hinzufügen

Spaltenstruktur

Weiter zur nächsten und letzten Reihe. Verwenden Sie die folgende Spaltenstruktur:

erweiterte Textanimationen

Abstand

Wechseln Sie zur Registerkarte Entwurf der Zeile und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

Obere Polsterung: 10%
Untere Polsterung: 5%
Linke Polsterung: 3%
Rechte Polsterung: 3%

erweiterte Textanimationen

Box Schatten

Aktivieren Sie dann einen subtilen Boxschatten.

Stärke der Box-Schattenunschärfe: 80px
Schattenfarbe: rgba(0,0,0,0.06)

erweiterte Textanimationen

Animation

Und vervollständigen Sie die Zeileneinstellungen, indem Sie die folgende Animation hinzufügen:

Animationsstil: Ausblenden
Animationsverzögerung: 3000ms

erweiterte Textanimationen

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen. Das erste Modul, das wir brauchen, ist ein Textmodul mit einigen Beschreibungsinhalten.

erweiterte Textanimationen

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

Textschriftart: Lato
Textgröße: 18px
Text Buchstabenabstand: 1px
Textzeilenhöhe: 2.7em

erweiterte Textanimationen

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir brauchen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

erweiterte Textanimationen

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
Schaltflächentextgröße: 16px
Schaltflächentextfarbe: #171cff
Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 0px

erweiterte Textanimationen

Button-Schriftart: Montserrat
Schaltflächenschriftart: Großbuchstaben

erweiterte Textanimationen

Abstand

Wenden Sie dann die folgenden Abstandswerte innerhalb der Abstandseinstellungen an:

Obere Polsterung: 2%
Untere Polsterung: 2%
Linke Polsterung: 5%
Rechte Polsterung: 5%

erweiterte Textanimationen

Box Schatten

Vervollständigen Sie die Moduleinstellungen, indem Sie den folgenden Boxschatten hinzufügen:

Vertikale Position des Kastenschattens: 5px
Stärke der Box-Schattenausbreitung: -2px
Schattenfarbe: #171cff

erweiterte Textanimationen

2. CSS-Klasse zur Überschrift hinzufügen

Öffnen Sie das Textmodul Nr. 1 und klicken Sie auf die Registerkarte „Text“.

Nachdem wir nun alle Designelemente eingerichtet haben, ist es an der Zeit, unserer Überschrift die erweiterten Textanimationen hinzuzufügen. Öffnen Sie das Textmodul, das die H1-Kopie enthält, und wählen Sie die Registerkarte Text aus.

erweiterte Textanimationen

CSS-ID zum H1-Tag hinzufügen

Fügen Sie im H1 eine benutzerdefinierte CSS-ID hinzu.

ID="headlineCopy"

erweiterte Textanimationen

3. Letterize & Anime-Bibliotheken hinzufügen

Codemodul zur Spalte hinzufügen

Um die Animationen zu erstellen, verwenden wir die Bibliotheken letterize.js und anime.js. Um diese Bibliotheken hinzuzufügen, fügen Sie ein neues Codemodul in die Spalte Ihrer letzten Zeile ein.

erweiterte Textanimationen

Beide Bibliotheken hinzufügen

Fügen Sie dann zwei verschiedene Skript-Tags hinzu, die die folgenden Quellen enthalten, die zurück zu den Bibliotheken führen:

src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

erweiterte Textanimationen

4. Animationscode hinzufügen

Animation für Brief auf individueller Ebene

Im letzten Teil dieses Tutorials fügen wir den Animationscode hinzu, der Teil der Bibliotheken letterize.js und anime.js ist. Um den Effekt zu erzielen, den Sie in der Vorschau dieses Beitrags sehen konnten, wenden wir zwei Arten von Animationen an. Die erste Animation wird auf jeden Buchstaben einzeln und nacheinander angewendet. Dies wird mit der Bibliothek letterize.js erreicht. Diese Bibliothek platziert in Kombination mit dem ersten Teil des folgenden Codes jeden Buchstaben in Ihrer Kopie in einem separaten Bereich. Diese Spannen werden dann während des gesamten Animationsprozesses separat angesteuert. Stellen Sie sicher, dass Sie den folgenden Code zwischen den Skript-Tags platzieren.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

Jede Add-Funktion repräsentiert eine Animation in einer Zeitleiste von Animationen. Diese Animationen gelten für jeden Buchstaben auf einer individuellen Ebene. Sie können diese Add-Funktionen beliebig ändern, neue hinzufügen oder bestehende entfernen, stellen Sie nur sicher, dass die letzte Add-Funktion mit einem ';' am Ende (wie Sie im obigen Code sehen können). Sie können innerhalb dieser Add-Funktionen verschiedene CSS-Eigenschaften hinzufügen. Weitere Informationen zu den Eigenschaften und ihrer Verwendung finden Sie in den Dokumentationsbeispielen von anime.js. In diesem Tutorial haben wir absichtlich mehrere Animationen hinzugefügt, um zu zeigen, wie die Zeitleiste funktioniert, aber Sie werden wahrscheinlich etwas Subtileres oder Kürzeres für Ihre eigenen Projekte verwenden wollen.

erweiterte Textanimationen

Animation zum Satz

Nachdem Sie den ersten Teil der Animation hinzugefügt haben, der jeden Buchstaben einzeln anspricht, gehen wir zum zweiten Teil unserer Animation über. Dieser Teil zielt auf die gesamte Kopie als Ganzes ab. Der Animationsansatz ist der gleiche wie oben; Wir platzieren das gesamte Modul in einer Timeline-Animation. Jede Add-Funktion repräsentiert eine andere Animation innerhalb dieser Timeline. Sie können diese Hinzufügen-Funktionen ändern, neue hinzufügen oder bestehende entfernen. Stellen Sie sicher, dass Sie diesen neuen Code vor dem Ende des Skriptcodes platzieren, wie Sie im Druckbildschirm unten sehen können.

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

erweiterte Textanimationen

Benutzerdefiniertes CSS für Span hinzufügen

Da wir nun für jeden unserer Buchstaben eine separate Spanne erstellt haben, müssen wir die Anzeigeeigenschaft jeder Spanne ändern, damit die Buchstaben nebeneinander angezeigt werden. Dazu fügen wir unserem Codemodul CSS-Code hinzu. Stellen Sie sicher, dass Sie den Code zwischen Style-Tags platzieren.

#headlineCopy span {
display: inline-block;
}

erweiterte Textanimationen

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

erweiterte Textanimationen

Handy, Mobiltelefon

erweiterte Textanimationen

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie erweiterte Textanimationen für Ihre Überschrift erstellen. Wir haben das gesamte Design in Divi erstellt und das Framework mit den letterize.js- und anime.js-Bibliotheken kombiniert. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.