A simple plugin that adds a typewriter effect to any text, giving it the appearance of being typed onto the page.
Requirements: jQuery 1.4+
- Lightweight (<2KB) and efficient
- Realistic typing effect with randomisation options
- Blinking cursor effect, customisable through CSS with
.simpleTyperCursor - Optional advanced customisation options
Simply add a simpleTyper class to any element, and the text to be typed as a data-typer-text html attribute.
HTML:
<p id="example" class="simpleTyper" data-typer-text="Hello World!"></p>JS:
simpleTyper.init().start($('#example')[0]);- simpleTyper.init(): Initialise the plugin
- simpleTyper.start(element): Start the typing effect on this non-jQuery element.
- simpleTyper.stop(element): Force the effect to stop on this non-jQuery element. Note: the effect stops automatically upon completion.
- simpleTyper.startAll(): This will start the typing animation on every applicable element.
- simpleTyper.settings(settings): override default settings with an
object(see below for detail).
These can be passed in as a object to simpleTyper.settings(), or applied directly to an element by adding
data-typer-{your-property}="{your-value}" to the HTML.
Type: Number (ms), Default: 1000
How long it will take for a letter to be typed.
Type: Number (ms), Default: 0
A delay between when simpleTyper.start() is called and when the animation begins.
Type: Number (fraction), Default: 0.1
A multiplier (0 to 1) which randomly shifts the speed attribute. This adds realism to the animation.
Type: Number (ms), Default: 500
How fast the cursor blinks. Note: cursor must be implemented in CSS using .simpleTyperCursor.
Type: Number (ms), Default: 1000
How long the cursor continues to blink for after the typing animation has finished.
The most basic usage, with default settings: Basic Usage (CodePen)
Changing the default settings: Settings Change (CodePen)