Bei einem Kundenprojekt bestand die Herausforderung darin, eine "Typing-Animation" im Hero-Bereich der Webseite zu implementieren. Mein erster Ansatz war die Verwendung von 'Typer.js'. Dieses Tool ließ sich zwar schnell einrichten und funktionierte gut, bot jedoch nicht genügend Anpassungsmöglichkeiten, um den spezifischen Kundenwünschen gerecht zu werden.
In der Folge entdeckte ich 'typed.js', welches mehr Konfigurationsoptionen bietet. Diese Flexibilität erlaubte es mir, die Animation präzise nach den Anforderungen meines Kunden zu gestalten.
Um zu starten, brauchst du nur einen Div-Block, in den die Typing-Animation eingefügt werden soll. In meinem Fall hatte dieser die Klasse 'typed-words'.
Direkt im Anschluss findest du das Skript. Weiter unten erkläre ich dir jede Zeile des Skripts im Detail und zeige dir zusätzliche Optionen und Möglichkeiten auf.
Hier gehts zum Webflow Clonable: Typer.js Animation in Webflow*
Typing Animation Skript
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
<script>
var typed = new Typed(".typed-words", {
strings: ["Text1", "Text2", "Text3","Text4"],
typeSpeed: 75,
backSpeed: 50,
backDelay: 1000,
startDelay: 1000,
loop: true,
showCursor: false,
});
</script>
Typing Custom-Cursor Code
<style>
/* add custom cursor */
.typed-words::after {
content: "|";
display: inline;
animation: blink 1s infinite;
}
/* custom cursor animation */
@keyframes blink
{
0% {
opacity: 1;
}
50%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
</style>
Wir arbeiten mit einem Custom Cursor, da dieser einige Vorteile mit sich bringt z. B. bleib die Höhe des Elements konstant, wenn gerade kein Buchstabe ‘getyped’ wird. Ohne unseren Cursor verschieben sich die Elemente dann nach jedem Wort.
Parameter von Typed.js
Hier werden die Parameter erklärt, die in unserem Skript verwendet werden:
‘strings: []’ - In diesem Parameter schreibst du deine Textvorlagen in Anführungszeichen, trenne jedes Wort mit einem Komma.
‘typeSpeed:’ - Gibt die Geschwindigkeit vor, welche die Animation von Buchstabe zu Buchstabe braucht, während sie die Wörter schreibt.
‘backSpeed:’ - Gleicher Ansatz wie bei ‘typeSpeed’, nur dass es hier um die Geschwindkeit beim Löschen der Wörter geht.
‘backDelay:’ - Wartet den gesetzten Wert am Ende, nachdem ein Wort ausgeschrieben wurde.
‘startDelay:’ - Die Wartedauer bevor die Animation startet
‘loop:’ - Ist dieser Wert wahr, spielt sich die Animation von neu ab. Falls nicht stoppt diese beim letzten Wort.
‘showCursor: false’ - Versteckt den Standard-Cursor, um Bugs zu vermeiden - wir verwenden unseren Custom-Cursor.
Weitere mögliche Parameter:
‘shuffle: true’ - Mischt die Strings miteinader
‘loopCount: Infinity’ - wie oft euere Strings geloopt werden sollten
‘smartBackspace: true’ - Falls ‘true’, löscht die Animation nur das, was nicht mit der vorherigen Zeichenfolge übereinstimmt.
Fazit
Typed.js ist eine sehr gute und flexible Möglichkeit, um eine Typewriting Animation einfach in Webflow zu erstellen. Mit unserem Custom Cursor können wir Bugs vermeiden und ein konstantes und sauberer Endprodukt liefern. Für die Implementierung muss man auf keinen Fall Webflow Entwickler sein - auch Anfänger können das Set-Up schnell reproduzieren.
Mit Sternchen * markierte Links sind Affiliate-Links.
