Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Add animated text typing to any element.
branch: master

This branch is 2 commits behind davidcrawford:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
jquery.typist.js

README.md

typist-jquery

Typist is a jQuery plugin that allows you to animate text as if it were being typed onto the screen.

$('#terminal').typist({
  height: 300
});

$('#terminal').typist('prompt')
  .wait(1500)
  .typist('type', 'greet')
  .typist('echo', 'Hello, world!')

See it in action at http://chartulo.us

Options

Pass in options when initializing your 'terminal' by passing in an object with the following properties.

  • height Typist sets your div to be fixed height with overflow: hidden, so that text scrolls off the top like a terminal window. Use height to set the desired height (just passes through to CSS). Integer number of pixels.

  • width Sets a fixed width for your terminal element. Integer number of pixels.

  • backgroundColor Set the color of the terminal element. Any string that's a valid color in CSS.

  • textColor Set the text color. Any string that's a valid color in CSS.

  • fontFamily Set the font family for the text in the terminal.

API

typist(config)

Initializes the terminal element.

typist('prompt')

Adds a prompt line and starts a cursor blinking.

typist('type', text)

Types text on a prompt line.

typist('echo', text)

Prints out text as if it were the output of a command. Creates a new line.

typist('wait', millis)

Pauses animation for the specified number of milliseconds. If on a prompt line, cursor continues to blink.

typist('speed', fast_or_slow)

Sets the speed of typing/echoing for commands that come afterwards

Something went wrong with that request. Please try again.