Typing-Effekt: Code-Analyse¶

HTML-Struktur¶

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tippen ⌨️</title>
    <!-- HTML-Grundstruktur -->
</head>
<body>
    <div id="inhalt">
        <p>Anna Berger</p>  
        <p id="tippen"></p>
    </div>
</body>
</html>

CSS-Styling¶

<style>
    body {
        padding: 2em;
        font-family: corbel, sans-serif;
        font-size: 3.8em;
    }
    #tippen {
        color: #be3455; /* Farbe des Jahres 2023 */
        font-weight: bold;
    }
</style>

- Großer Schrifttyp - Hervorgehobene Farbe für Typing-Effekt

JavaScript-Code¶

<script>
    // Array mit zu typisierenden Texten
    const texts = ["Teacher", "Blogger", "Human"];

    // Zustandsvariablen für den Typing-Effekt
    let currentIndex = 0;   // Aktueller Text-Index
    let charIndex = 0;      // Aktueller Buchstaben-Index
    let currentText = '';   // Aktueller Text
    let deleting = false;   // Modus: Tippen oder Löschen

    function typeText() {
        // Aktuellen Text auswählen
        currentText = texts[currentIndex];

        if (!deleting) {
            // Text hinzufügen
            document.getElementById("tippen").textContent = 
                currentText.slice(0, charIndex++);

            // Prüfen ob vollständig getippt
            if (charIndex === currentText.length + 1) {
                // Kurze Pause vor dem Löschen
                setTimeout(() => { deleting = true; }, 1000);
            }
        } else {
            // Text löschen
            document.getElementById("tippen").textContent = 
                currentText.slice(0, charIndex--);

            // Prüfen ob vollständig gelöscht
            if (charIndex === 0) {
                deleting = false;
                // Zum nächsten Text wechseln
                currentIndex = (currentIndex + 1) % texts.length;
            }
        }

        // Geschwindigkeit: Löschen schneller als Tippen
        let typingSpeed = deleting ? 100 : 200;
        setTimeout(typeText, typingSpeed);
    }

    // Typing-Effekt starten
    typeText();
</script>

Funktionsprinzipien¶

Dynamische Textmanipulation
Zyklischer Durchlauf der Texte
Rekursive Animationssteuerung