souravzzz / typist-jquery

Add animated text typing to any element.

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