Getippter Text mit CSS-Animationen
Von Jonas Mit einer in Stufen ablaufenden Keyframe-Animation, einem Monospace-Font und der CSS-Einheit ch kann Text so animiert werden, dass er aussieht als würde er getippt.
Wenn der Eindruck erweckt werden soll, als würde ein Text getippt, wird häufig auf JavaScript zurückgegriffen. Doch der Effekt lässt sich auch mit einer CSS Keyframe-Animation erstellen. Im Folgenden 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');Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Wie baue ich da einen Zeilenumbruch ein (im JavaScript) nach einer gewissen Anzahl von Buchstaben oder oder Länge des Textes.
Super genau das habe ich gesucht! Vielen Dank <3
Hoi Johnas,
Alter Beitrag, hat aber immer noch seine Gültigkeit. Ich liebe CSS Animation. Einfach und sehr effektiv. Danke für den Tipp.
Bin gerade durch Zufall auf deinen Blog gestoßen, schaue mich gerade etwas um. Hier findet man wirklich viele hilfreiche Artikel :) Vielen Dank für den Beitrag und den Tipp mit der CSS-Keyframe-Animation. Das werde ich mir auf jeden Fall einmal genauer ansehen.
Toller Artikel Jonas!
Konnte ich ohne Probleme außerhalb von WordPress nachstellen.
Die Variante mit JavaScript funktioniert leider nicht mit WordPress. So ist es auf jeden Fall bei mir.
Habe es versucht in mein selbst erstelltes Genesis Theme einzubauen. Ohne Erfolg da, das Script die inline style werte nicht schreibt.
Vielleicht mache ich etwas falsch.
Danke….Ich hab’s noch nicht durchgespielt.
Eine Frage stellt sich: Wie sieht das mit Zeilenumbruch aus??
Ich habe es jetzt auch noch nicht ausprobiert. Aber ich denke der Zeilenumbruch macht bei der CSS-Lösung Ärger. Dann würde ich wahrscheinlich eher eines der oben im Artikel verlinkten JS-Tools verwenden.