https://github.com/layervault/jquery.typer.js
A simple jQuery plugin for a slick typing effect.
https://github.com/layervault/jquery.typer.js
Last synced: 7 months ago
JSON representation
A simple jQuery plugin for a slick typing effect.
- Host: GitHub
- URL: https://github.com/layervault/jquery.typer.js
- Owner: layervault
- Created: 2012-07-25T20:27:24.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2020-04-17T04:41:36.000Z (about 6 years ago)
- Last Synced: 2025-09-19T11:38:19.568Z (8 months ago)
- Language: JavaScript
- Size: 195 KB
- Stars: 743
- Watchers: 27
- Forks: 102
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Usage
jquery.typer.js can be used one of two ways:
### Type once with typeTo()
If you just want to use the effect once, use `typeTo()`. It can be used as follows:
```javascript
$('h3').typeTo("New Text");
```
This will do a one-time transition.
### Type indefinitely with typer()
Now let's say you want to loop over a set of strings for the typing effect. Easy!
```javascript
$('[data-typer-targets]').typer();
```
That code will start the effect on all elements with the `data-typer-targets` attribute.
You obviously need to supply it with some source data. The `data-typer-targets` attribute can be either a comma-separated string or a piece of JSON.
### Options
There are some options that are available to you as well:
```javascript
// Defaults
{
highlightSpeed : 20,
typeSpeed : 100,
clearDelay : 500,
typeDelay : 200,
clearOnHighlight : true,
typerDataAttr : 'data-typer-targets',
typerInterval : 2000
}
```
Set the options individually:
```javascript
$.typer.options.highlightSpeed = 500;
```
## About
jquery.typer.js was originally developed for [LayerVault](http://layervault.com) by [Kelly Sutton](http://kellysutton.com).
You can see more projects from LayerVault in the [LayerVault Cosmos](http://cosmos.layervault.com).