CSS: Ein Typewriter – Effekt

Richtig eingesetzt können Schreibmaschinen- oder auch Typewriter Effekte eine statische Webseite kreativ zum Leben erwecken.


Typewriter Effect mit CSS




In diesem kurzen Video siehst du den Effekt in Action:



Ich habe zwei Versionen ausprobiert: Eine einzeilige und eine Version, die zwei Zeilen hat. Für kurze ein bis zwei Wort Überschriften eignet sich der Einzeiler ziemlich gut. Allerdings bekommt man bei längeren Texten schnell ein Problem mit der Responsiveness des Schreibmaschineneffektes.

Ich rate deswegen dazu den Text, den du mit so einem Effekt animieren möchtest, so kurz wie möglich zu halten. Und wenn er länger wird, verwendest du am Besten eine zweizeilige Animation.

Der Zweilzeiler ist etwas komplexer im Aufbau. Aber weil Text mit Schreibmaschineneffekt keinen Zeilenumbruch haben darf damit der Effekt funktioniert, lohnt sich der Aufwand.

Am Besten überlegst du dir also vorher, wie lang dein Text werden soll und welche Version des Effektes du dem entsprechend verwendest.

In diesem Beitrag zeige ich die zweizeilige Version, weil sie komplexer ist. Am Ende findest du aber auch ein funktionierendes Beispiel des Einzeilers.

Also, los gehts!

Typewriter Effect mit CSS



Das HTML-Grundgerüst ist simpel:

<div class="wrapper">
  <p class="line__1">If at first you don't succeed, </p>
  <p class="line__2">call it version 1.0</p>
</div>


Es folgen die Styles in CSS:

Hierfür beginne ich mit ein paar allgemeinen Definitionen fürs Aussehen der kompletten Seite:

html {
  height: 100%;
  width: 100%;
  background: #111;
  color: #00cc44;
  font-family: "Major Mono Display", monospace;
}


Dann bekommt das div, was meine Schreibmaschinenzeilen umschließen wird, eine Maximalbreite und -höhe:

.wrapper {
  width: 100%;
  height: 100%;
}


Weiter geht es mit den einzelnen Textzeilen:

.line__1,
.line__2 {
  white-space: nowrap;
  overflow: hidden;
  margin: 0.5rem auto;
  font-family: monospace;
  font-size: 2rem;
  font-weight: bold;
}

white-space: nowrap; ist wichtig um einen Zeilenumbruch zu verhindern. Das ist wichtig, damit der Effekt funktioniert.

whitespace: nowrap ist die Einstellung, welche die Responsiveness des Schreibmaschineneffektes einschränkt.

Richtig eingesetzt steht der Effekt einer responsiven Webseite trotzdem nicht im Weg! Wenn du die animierten Texte kurz hälst und die Schriftgröße etwas anpasst, sollte alles selbst auf kleine Smartphone Bildschirme passen.

Mit overflow:hidden; wird der Text hinter dem Cursor versteckt, sodass er Stück für Stück erscheint, wenn der Cursor mit der Animation bewegt wird, die ich weiter unten einstellen werde.




Die erste Textzeile:

.line__1 {
  border-right: 2px solid rgba(17, 17, 17, 0.9);

  animation: animated-text__1 6s steps(30, end)
             1s 1 normal both,
             animated-cursor__1 900ms steps(30, end) 8;
}

Mit border:right stelle ich den Cursor da.

Jetzt erstelle ich auch die Animation für den Cursor. Dafür ist animation verantwortlich.




Die zweite Textzeile:

.line__2 {
  border-right: 2px solid rgba(17, 17, 17, 0.9);

  animation: animated-text__2 5s steps(30, end) 
             1s 1 normal both,
             animated-cursor__2 900ms steps(30, end) infinite;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}

Auch für die zweite Zeile des Schreibmaschieneneffekts definiere ich den Cursor – wieder mit border-right und in derselben Farbe wie Cursor eins. Schließlich soll es so aussehen das wäre es ein und derselbe Cursor, wenn der Effekt fertig ist.

Genau wie für Zeile eins bekommt auch Zeile zwei eine Animation. Wichtig hier ist dass die Animatin für Zeile zwei erst beginnt, wenn die Animation für Zeile eins beendet wurde.

Das erreiche ich mit animation-delay. Je nach Länge deines Textes brauchst du hier eine andere Zeit, damit der Effekt flüssig aussieht. Bei mir sind es 7 Sekunden.



Jetzt folgt die Animation des Textes.

Der Schreibmaschinentext wird animiert von einer Breite von 0 zu einer Breite von – in meinem Fall 45rem und 29rem für Zeile zwei. Zeile eins und zwei bekommen unterschiedliche Breiten, weil sie unterschiedliche Textlängen haben.


Die Breite kann und sollte also angepasst werden. Mit Rumprobieren findest du bestimmt schnell die passende Breite für deinen Text.

@keyframes animated-text__1 {
  from {
    width: 0;
  }
  to {
    width: 45rem;
  }
}
@keyframes animated-text__2 {
  from {
    width: 0;
  }
  to {
    width: 29rem;
  }
}



Zum Schluss animiere ich den Blinkeffekt für die Cursor.

Es gibt jeweils einen Cursor pro Textzeile. Später wird es dann so aussehen, als ob der Cursor in die nächste Zeile springt.

@keyframes animated-cursor__1 {
  from {
    border-right-color: rgba(17, 17, 17, 0.9);
  }
  to {
    border-right-color: rgba(255, 255, 255, 0.8);
  }
}
@keyframes animated-cursor__2 {
  from {
    border-right-color: rgba(17, 17, 17, 0.9);
  }
  to {
    border-right-color: rgba(255, 255, 255, 0.8);
  }
}

Ich verwende zwei unterschiedliche Animationen, weil die Cursor ja nacheinander in Aktion treten: Cursor zwei soll erst dann sichtbar werden, wenn Zeile eins zuende geschrieben wurde.

Für WebseitenbesucherInnen sieht es dann so aus als würde einfach in Zeile zwei weiter geschrieben – wie auf einer Schreibmaschine (benutzt die eigentlich noch jemand?)



Der fertige Effekt

Den fertigen Effekt kannst du hier auf Codepen ansehen. Dort siehst du auch meinen funktionierenden Code live und kannst so viel du willst damit herumspielen, Dinge ausprobieren und abhändern wie es dir gefällt!

Codepen funktioniert am Besten auf der externen Webseite. Du erreichst sie indem du auf das Edit on Codepen Icon klickst.

See the Pen CSS Multiline – Typewriter Effect by Marty (@Marty-Development) on CodePen.





Hier siehst du den Einzeiler in Aktion

Den einzeiligen Schreibmaschineneffekt kannst du dir auch in meiner Pen ansehen. Auch für diesen Effekt habe ich den Code für dich veröffentlicht, sodass du ihn einfach verwenden kannst.

Codepen funktioniert am Besten auf der externen Webseite. Du erreichst sie indem du auf das Edit on Codepen Icon klickst.

See the Pen CSS Typewriter Effect by Marty (@Marty-Development) on CodePen.



Dir gefällt der Effekt und du möchtest ihn in einem Projekt verwenden? Gerne! 🙂

Verlink es mir doch einfach in den Kommentaren am Ende dieser Seite. Ich bin sehr gespannt und werde dir garantiert antworten!


Vielen Dank fürs Lesen!

→ Veröffentlicht am 07/08/2020 in CSS, Code & Co

→ Schlagwörter: , , , , Einloggen um den Post zu editieren.

0 comments on “CSS: Ein Typewriter – Effekt

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.