"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 calls once 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 global setup object
window.setup = window.setup || {};

// Add a 'typewriter' object
setup.typewriter = {};

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

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

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

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


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

Download: Twee Code

results matching ""

    No results matching ""