"Typewriter Effect": Snowman (v1.3.0)


"Typewriter Effect" demonstrates how to create a delayed character-by-character effect. In Snowman, this is achieved using recursive calls to the setTimeout() function to repeat function calls every one second. A jQuery selector is used to find an element with the ID "typewriter" whose HTML content is updated with the text every second until it is fully shown.

Live Example

Download: Live Example

Twee Code

:: StoryTitle
Typewriter Effect in Snowman

:: UserScript[script]
// Create a new global object
window.typewriter = {};

// Save an index of the string.
//     Start at -1 because it will be increased
//  once (to 0) before the first chracter is shown.
window.typewriter.index = -1;

// Allow users to set global text
window.typewriter.text = "";

// Save a reference to the setTimeout call
window.typewriter.timerReference = 0;

// Write text character by character to an element
//  with the ID "typewriter"
window.typewriter.write = function(){
    // Test if the index is less than the text length
        if(window.typewriter.index < window.typewriter.text.length) {
            // Update the current text character-by-character
            $("#typewriter").html() + window.typewriter.text[window.typewriter.index]
            // Increase the index
            // Save the timeout reference
        window.typewriter.timerReference = setTimeout(window.typewriter.write, 1000);
    } else {
        // Clear out the timeout once index is greater than string length
        // Reset the index
        window.typewriter.index = -1;


:: Start
<div id="typewriter"></div>
    window.typewriter.text = "Hello, world!";

Download: Twee Code

results matching ""

    No results matching ""