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
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. Useheight
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.
Initializes the terminal element.
Adds a prompt line and starts a cursor blinking.
Types text on a prompt line.
Prints out text as if it were the output of a command. Creates a new line.
Pauses animation for the specified number of milliseconds. If on a prompt line, cursor continues to blink.
Sets the speed of typing/echoing for commands that come afterwards