Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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;
  }
}

Beispiel anschauen

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');

 

Beispiel anschauen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Mario
    schrieb am 14.05.2021 um 00:10 Uhr:

    Super genau das habe ich gesucht! Vielen Dank <3

    Antworten
  2. Dan Riesen
    schrieb am 14.09.2018 um 17:00 Uhr:

    Hoi Johnas,
    Alter Beitrag, hat aber immer noch seine Gültigkeit. Ich liebe CSS Animation. Einfach und sehr effektiv. Danke für den Tipp.

    Antworten
  3. Grafiker
    schrieb am 10.02.2017 um 09:25 Uhr:

    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.

    Antworten
  4. Felix Scholze
    schrieb am 07.10.2016 um 16:28 Uhr:

    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.

    Antworten
  5. thomas
    schrieb am 15.09.2016 um 14:38 Uhr:

    Danke….Ich hab’s noch nicht durchgespielt.

    Eine Frage stellt sich: Wie sieht das mit Zeilenumbruch aus??

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 16.09.2016 um 17:00 Uhr:

      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.

      Antworten

Schreibe einen Kommentar zu Felix Scholze Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →