Tipp-Animation mit Types.js

Typed.js ist eine JavaScript Bibliothek, die selbsttätig tippt. Gebe eine beliebige Zeichenfolge ein und siehe zu, wie sie mit der von dir festgelegten Geschwindigkeit eingegeben wird, die getippten Zeichen mit einer anderen Geschwindigkeit gelöscht und weitere Worte geschrieben werden.

Ich verwende die gehostete CDN-Version (Content Delivery Network) der JavaScript Bibliothek:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

Füge folgenden Code vor den </body>-Tag deiner Seite ein:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

    <script>
    	var typed4 = new Typed('.typed-text', {
        strings: ['WordPress.', 'Sandboxxx.de.', 'Let\'s do it.'],
        typeSpeed: 125,
        backSpeed: 85,
        backDelay: 1800,
        startDelay: 1200,
        loop: true,
        showCursor: false,
        cursorChar: '|',
        attr: null,
      });
    </script> 

Das Skript wendet die Animation auf die hier genannte CSS-Klasse ‚.typed-text‘ an. Den Namen kannst du frei wählen, sollte natürlich hier, in deinem HTML und Stylesheet übereinstimmen. Wenn du statt einer Klasse lieber eine ID vergeben möchtest, muss hier die Syntax ‚#typed-text‘ lauten.

Unter ’strings‘ erfasst du die Zeichenfolgen, die erscheinen sollen. ‚Speed‘ und ‚delay‘ steuern das Zeitverhalten der Animation in Millisekunden: kleine Werte für schnell, hohe Werte für langsam. Den Cursor schalten wir an dieser Stelle aus – diesen fügen wir per CSS ein:

<style>
/* add custom cursor */
.typed-text::after {
   content: "|";
   display: inline;
   animation: blink 1s infinite;
}

/* custom cursor animation */
@keyframes blink {
   0% {
      opacity: 1;
      }
   50% {
      opacity: 0;
      }
   100% {
      opacity: 1;
      }
   }
</style>

Diese style-Attribute ergänzen dein Stylesheet um den Cursor und dessen Animation.

Weiter Details und Optionen – z. B. für eine zufällige Wiedergabe der Zeichenfolgen etc. -findet ihr auf der Entwicklerseite von Matt Boldt.