Lesefortschritt:

Typewriter-Effekt: Texte «live» am Monitor schreiben lassen

22. November 2023 | CSS-Stylesheet, HTML

Trick # 294 | Dieser Beitrag beinhaltet 537 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Heute ein interessanter Animationseffekt: Texte werden quasi live am Monitor geschrieben. Dieser Typewritereffekt startet, sobald die Seite geladen wird. Sie benötigen bloss einige Zeilen CSS-Code – wir zeigen Ihnen alles weitere.

Damit Sie sich ein Bild machen können – hier ein Beispiel dessen:

Der Text wird gewissermassen live geschrieben; dann bleibt der Cursor stehen und blinkt.

Für eine solche Animation benötigen Sie CSS-Code. Den folgenden Block können Sie kopieren und ins CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS – einfügen:

.typewriter h2 {
  overflow: hidden; /* Sorgt dafür, dass der Inhalt erst während der Animation sichtbar wird */
  border-right: .15em solid #59B14B; /* Der Schreibmaschinen-Cursor */
  white-space: nowrap; /* Behält den Inhalt in einer einzigen Zeile */
  margin: 0 auto; /* Erzeugt den Bildlaufeffekt beim Tippen */
  /*letter-spacing: .15em;*/ /* Nach Bedarf anpassen */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* Der Schreibmaschineneffekt */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Der Schreibmaschinen-Cursor-Effekt */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #59B14B; }
}

Nun wechseln Sie in den Texteditor und suchen die gewünschte Stelle. Tun Sie dies in der HTML-Ansicht und fügen Sie am geeigneten Ort die folgenden Zeilen ein:

<div class="typewriter">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Falls Sie das Divi-Theme benutzen, eignet sich auch ein Code-Modul für die Platzierung des Textblocks.

Im Einsatz sieht der Effekt dann folgendermassen aus:

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.