JavaScripts › Texteffekte

Schreibmaschinen-Effekt

Lässt einen Text Buchstabe für Buchstabe erscheinen, mit blinkendem Schreibbalken und einstellbarem Tempo.

Der Schreibmaschinen-Effekt gehört zu den ältesten Kunststücken auf Webseiten: Der Text erscheint nicht auf einen Schlag, sondern tippt sich selbst, Buchstabe für Buchstabe, mit einem blinkenden Balken dahinter. Früher lief so etwas in der Statuszeile des Browsers — die gibt es längst nicht mehr, das Prinzip aber schon, und es ist heute noch genauso wirksam für eine Begrüßung, ein Motto oder die Überschrift einer Startseite.

Tragt euren Text ein und stellt das Tempo in Millisekunden je Zeichen ein. 60 Millisekunden entsprechen ungefähr flottem Tippen, 150 wirken bedächtig, unter 30 wird es hektisch. Mehrere Zeilen sind erlaubt: Zeilenumbrüche werden mitgeschrieben. Mit dem Schalter darunter beginnt der Text nach einer Pause von vorn — praktisch für eine Kopfzeile, die dauerhaft in Bewegung bleiben soll.

Ein Wort zum maßvollen Einsatz: Der Effekt zieht Aufmerksamkeit auf sich, und genau deshalb sollte er sparsam vorkommen. Ein einzelner Satz auf der Startseite wirkt; ein ganzer Absatz zwingt den Leser, auf den Text zu warten, den er längst lesen könnte. Wer den Effekt für eine Überschrift nutzt, sollte den vollständigen Text zusätzlich unsichtbar in der Seite lassen, damit Suchmaschinen und Vorleseprogramme ihn finden — wie das geht, steht unten in der Erklärung.

Verwandte Bewegungseffekte findet ihr im Lauftext, der Text seitlich durchs Bild schiebt, und im definierbaren Countdown, der Texte nacheinander einblendet. Wer den Text nicht bewegen, sondern verwandeln will, findet in dieser Abteilung den Leetspeak-Wandler und den Text auf dem Kopf.

Texteffekte Baujahr 2026 läuft in deinem Browser
Script von kostenlose-javascripts.de

So funktioniert das Script

Das Script besteht aus einer Funktion, die sich selbst immer wieder aufruft — bei jedem Aufruf ist ein Zeichen mehr geschrieben. Dieses Muster begegnet euch bei jeder Animation im Browser.

if (stelle <= text.length) {
  zeichnen(text.slice(0, stelle));
  stelle++;
  uhr = setTimeout(schreiben, tempo());
  return;
}

Der Kern ist die Zählvariable stelle und der Aufruf text.slice(0, stelle): Der ausgegebene Text ist immer das Stück vom Anfang bis zur aktuellen Stelle. Es wird also nicht Zeichen für Zeichen angehängt, sondern jedes Mal der ganze Abschnitt neu gesetzt. Das klingt umständlicher, ist aber unempfindlich — man kann jederzeit von vorn beginnen, ohne aufräumen zu müssen.

setTimeout(schreiben, tempo()) stellt einen Wecker: „Ruf mich in so vielen Millisekunden wieder auf." Weil die Funktion darin sich selbst einträgt, entsteht eine Kette von Aufrufen. Der Vorteil gegenüber dem verwandten setInterval, das in festem Takt läuft: Das Tempo lässt sich mitten im Lauf ändern, weil es bei jedem Schritt neu abgefragt wird. Ändert das Tempo, während der Text läuft — es wirkt sofort.

function anhalten() {
  if (uhr !== null) {
    clearTimeout(uhr);
    uhr = null;
  }
}

Jeder gestellte Wecker liefert eine Nummer zurück, die hier in uhr landet. Mit dieser Nummer lässt sich der Wecker über clearTimeout wieder abbestellen. Das ist wichtiger, als es aussieht: Ohne das Abbestellen würde jeder Druck auf „Losschreiben" eine weitere Kette starten, und nach dreimal Klicken schrieben drei Ketten gleichzeitig in dieselbe Fläche — ein Fehler, den man am wild springenden Text sofort sieht.

const balken = document.createElement("span");
balken.id = "sm-balken";
balken.setAttribute("aria-hidden", "true");
buehne.appendChild(balken);

Der blinkende Schreibbalken ist kein Zeichen im Text, sondern ein eigenes leeres Element mit einem Unterstrich als Rahmen. Das Blinken übernimmt eine CSS-Animation, nicht das Script — der Browser macht das flüssiger und sparsamer, als es eine weitere Wecker-Kette könnte. aria-hidden sagt Vorleseprogrammen, dass sie diesen Zierrat überspringen sollen.

if (schleife) {
  stelle = 0;
  uhr = setTimeout(schreiben, 2000);
}

Ist der Text zu Ende, entscheidet der Schalter, wie es weitergeht: Entweder wird der Zähler zurückgesetzt und nach zwei Sekunden Pause von vorn begonnen, oder die Kette endet einfach, indem kein neuer Wecker gestellt wird.

Zum Anpassen: Fürs Löschen rückwärts lasst ihr den Zähler nach dem Ende wieder heruntertaktieren statt auf null zu springen. Und ein Hinweis für Suchmaschinen und Barrierefreiheit: Schreibt den vollständigen Text zusätzlich in ein Element mit class="nur-vorlesen", das per CSS aus dem Sichtfeld geschoben wird — dann steht er im Quelltext, ohne doppelt zu erscheinen. Die Ausgabefläche selbst trägt hier aria-live="polite", damit Vorleseprogramme die Änderungen überhaupt mitbekommen.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Texteffekte