Animierte Texte mit Typed.js und WordPress erstellen

Oktober 2021

See the Pen

Typed.js ist eine Javascript-Bibliothek, welche von Matt Boldt entwickelt wurde. Mit dieser ist es kinderleicht animierten Text mit getippten Effekten (wie im Beispiel oben) zu erstellen.

Für die Animation kannst du beliebigen Text eingeben und anhand diverser Einstellungen, wie zum Beispiel der Tipp-Geschwindigkeit, an deine Anforderungen anpassen. Außerdem kannst du bei Bedarf auch das Löschen und Neuverfassen des Satzes einstellen.

Ein weiterer Pluspunkt der Bibliothek gegenüber anderen ist, dass sie SEO freundlich ist, da der ausgewählte Text als statischer HTML-Text ausgegeben wird.

Im folgenden Blog-Beitrag erkläre ich dir, wie du die Bibliothek super einfach in deine WordPress-Seite implementierst und einen eindrucksvollen Webauftritt für deine User schaffst.

Schritt 1: Einbinden der Bibliothek auf WordPress

Hierzu gehst du in die functions.php deines aktiven Themes und fügst die folgenden Code-Zeilen ein:

function loadScripts() {
    wp_enqueue_script("typed", "https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.js", array('jquery'), null, false);
}
add_action('wp_enqueue_scripts', 'loadScripts');

Wenn du per FTP Zugang auf deinen Server hast, dann kannst du die JavaScript-Datei “typed.min.js” direkt auf deinen Server hochladen und in der functions.php wie folgt verlinken:

function loadScripts() { 
    wp_enqueue_script("typed", __FILE__ . "typed.min.js", null, null, true); 
} 

add_action('wp_enqueue_scripts', 'loadScripts'); 

Welche Vorteile dieser Vorgang mit sich bringt:

• Sollte der CDN-Server offline sein, wird deine Animation trotzdem angezeigt, da die JavaScript-Datei lokal auf deinem Server liegt.
• Unerwünschte Updates zerstören dir nicht deine Animation.

Schritt 2: Erstelle das HTML für deinen animierten Text

Hierbei handelt es sich um den einfachsten Teil. Für die Erstellung des HTMLs musst du nur an der gewünschten Stelle, an der du die Animation anzeigen lassen möchtest, einen leeren HTML-Tag setzen (ob div, span, p, … etc. ist dabei vollkommen egal).

Wichtig ist dabei nur, dass du eine Klasse vergibst, die du dann im nächsten Schritt im JavaScript wieder verwendest.

In meinem Beispiel sieht das wie folgt aus:

<h1>Hello, we are

<div class="typed-wrapper">
        <span class="typed"></span>
</div>

</h1>

Schritt 3: Füge jetzt das passende JavaScript ein

Es existieren Plugins, welche diese Aufgabe für dich übernehmen. Wie zum Beispiel “Simple Custom CSS and JS” von SilkyPress.com.

Abhängig davon wie du deinen Text animieren möchtest, variiert auch das JavaScript, welches du in die Webseite einfügen musst.

Um wie in meinem Beispiel verschiedene Begriffe zu schreiben und wieder zu löschen, ist das foglender Code:

var typed = new Typed(".typed", {
    strings: [
        "a Full Service Agency", 
        "different",
        "Rechnerherz",
    ],

    // Schreibgeschwindigkeit
    typeSpeed: 60,

    // Löschgeschwindigkeit
    backSpeed: 60,

    //Verzögerund bis String gelöscht wird
    backDelay: 1200,

    //Verzögerung bis neuer String geschrieben wird
    startDelay: 1500,

    //nach letztem String von vorne anfangen
    loop: true

});

Weitere Anwendungsbeispiele

Du möchtest eine andere Animation erstellen? Dann findest du auf der Dokumentationsseite der Bibliothek viele weitere Beispiele.