Skip to content

"Typewriter Effect": Snowman (v1.3.0)#

Summary#

"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.

Example#

Download

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 character 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(
      $("#typewriter").html() + setup.typewriter.text[setup.typewriter.index]
    );
      // Increase the index
    setup.typewriter.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
    clearTimeout(setup.typewriter.timerReference);
    // Reset the index
    setup.typewriter.index = -1;
  }

}

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

Twee Download

See Also#

Delayed Text