Wenn der Eindruck erweckt werden soll, als würde ein Text getippt, wird häufig auf JavaScript zurückgegriffen. Wir haben selbst einige Tools zu diesem Zweck zusammengetragen. Doch der Effekt lässt sich auch mit einer CSS Keyframe-Animation erstellen. In diesem Beitrag zeigen wir wie es geht und was sich dennoch mit JavaScript optimieren lässt.
Die ch-Einheit und der Monospace-Font
Die Einheit ch definiert in CSS eine Breite, die der Null (0) in der gewählten Schriftart entspricht. Bei einem Monospace-Font sind alle Buchstaben gleich breit. Das machen wir uns zu nutze, indem wir die Länge des Textes von der Breite 0 auf die Breite 48ch animieren. Die 48 kommt hier zustande, da der Text des folgenden Beispiels eine Länge von 48 Zeichen umfasst.
steps()
In einer CSS-Keyframe-Animation kann die timing-function in steps() angegeben werden. Die steps()-Funktion legt fest, wie viele Abstufungen zwischen zwei Schlüsselbildern erzeugt werden sollen. Wenn wir die Anzahl der steps() mit der Anzahl der Buchstaben (48 in unserem Beispiel) gleich setzen, und gleichzeitig die Breite des Textes von 0 auf 48ch animieren, erscheinen die Buchstaben einzeln nacheinander.
white-space: no-wrap;
Wenn der Text aus mehreren Wörtern besteht, bricht die Animation am Leerzeichen ab. Nach dem Leerzeichen werden dann immer ganze Wörter eingeblendet, nicht mehr einzelne Buchstaben, wie eigentlich gewünscht. Mit Hilfe von white-space: no-wrap; beheben wir das Problem.
<h1 class="animated-text">Danke für deinen Besuch auf kulturbanause.de =:)</h1>.animated-text {font-family: monospace;overflow: hidden;height:1.1em;word-wrap: break-word;white-space: nowrap;animation: typing 4s steps(48) forwards;}@keyframes typing {from {width: 0;}to {width: 48ch;}}
Animation mit JavaScript vereinfachen
Etwas lästig an der oben beschriebenen puren CSS-Variante ist, dass die Anzahl der Buchstaben (48) manuell zwei Mal im Code notiert werden muss: Einmal innerhalb der animation-Eigenschaft und einmal innerhalb der @keyframes.
Mit ein wenig JavaScript (jQuery) können wir Anzahl der Zeichen innerhalb des Selektors .animated-text automatisch auslesen.
var character_count = $('.animated-text').text().length;Anschließend bauen wir die Zeichenzahl innerhalb der animation-Eigenschaft wieder ein, und ergänzen den Selektor .animated-text entsprechend.
$('.animated-text').css('animation', 'typing 4s steps(' + character_count + ') forwards').css('font-family', 'monospace');Die @keyframes statten wir ebenfalls mit der ausgelesenen Zahl aus und fügen im <head> einen Style-Abschnitt ein, der die @keyframes-Regel beinhaltet.
$('<style>@keyframes typing {from {width: 0; } to {width: ' + character_count + 'ch; } }</style>').appendTo('head');
Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.