Typewriter Effekt

Demo

 

Wenn der Text in einer Szene wie von einer Schreibmaschine getippt werden soll, dann kann dieser Effekt mit einem Javascript Code in einer globalen Sektion erreicht werden:

Globale Sektion -> Funktion Javascript

window.showSpeechBubble = function (text) {
    var output = document.getElementById("output");

    // Sprechblase erstellen
    var bubble = document.createElement("div");
    bubble.classList.add("speech-bubble");
    output.appendChild(bubble);

    // Text Typing Effekt
    let index = 0;
    bubble.style.opacity = 1; // Blendet die Sprechblase ein
    
    function typeWriter() {
        // HTML-Interpretation sicherstellen
        bubble.innerHTML = text.substring(0, index);

        if (index < text.length) {
            index++;
            setTimeout(typeWriter, 50); // Geschwindigkeit des Tippens
        }
    }

    typeWriter();
}

Globale Sektion -> Stylesheet

*optional, damit sieht der Text ähnlich wie eine Sprechblase aus.

.speech-bubble {
    position: absolute;
    top:100px;
    left: 5%;
    max-width: 90%;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid black;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    font-family: mom;
    font-size: 14px;
    color: black;
    line-height: 1.4;
    opacity: 0; /* Startet unsichtbar */
    transition: opacity 0.5s; /* Sanftes Einblenden */
}

.speech-bubble::after {

    position: absolute;

    left: 5%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-left: -5px;
}

Szene -> Funktion Javascript

setTimeout(function() {
    window.showSpeechBubble('HIER DER TEXT, DER GETIPPT WERDEN SOLL');
},2000);