Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stvwhtly/jquery-teletype-plugin
Teletype is a jQuery plugin that types out text, and then optionally deletes it, replicating human interaction.
https://github.com/stvwhtly/jquery-teletype-plugin
Last synced: 11 days ago
JSON representation
Teletype is a jQuery plugin that types out text, and then optionally deletes it, replicating human interaction.
- Host: GitHub
- URL: https://github.com/stvwhtly/jquery-teletype-plugin
- Owner: stvwhtly
- Created: 2014-09-05T18:40:19.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-30T19:34:14.000Z (over 7 years ago)
- Last Synced: 2024-10-30T14:57:44.280Z (14 days ago)
- Language: JavaScript
- Homepage: http://teletype.rocks/
- Size: 39.1 KB
- Stars: 66
- Watchers: 8
- Forks: 24
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
jQuery Teletype Plugin
======================
Teletype is a jQuery plugin that types out text, and then optionally deletes it, replicating human interaction.
Additional options provide the ability to preserve the typed text, in a console / terminal format, pause during typing and delete characters.
An online demo can be found at .
Installation
---
Via [bower](https://github.com/stvwhtly/jquery-teletype-plugin/blob/master/bower.json):
```bash
bower install jquery.teletype
```
Manual:
$( function() {
$( '.type-text' ).teletype( {
text: [ 'one', 'two', 'three' ],
typeDelay: 0,
backDelay: 20
} );
} );
...
Options
-------
Option | Default | Description
----------------------|-------------------------------------|------------
text | `['one','two','three']` (array) | List of strings to output.
typeDelay | `100` (integer) | Minimum delay, in ms, between typing characters.
backDelay | `50` (integer) | Minimum delay, in ms, between deleting characters.
blinkSpeed | `1000` (integer) | Interval, in ms, that the cursor will flash.
cursor | "|" (string) | Character used to represent the cursor.
delay | `2000` (int) | Time in ms to pause before deleting the current text.
preserve | `false` (boolean) | Prevent auto delete of the current string and begin outputting the next string.
prefix | `""` (string) | Begin each string with this prefix value.
loop | `0` (int) | Number of times to loop through the output strings, for unlimited use `0`.
humanise | `true` (boolean) | Add a random delay before each character to represent human interaction.
smoothBlink | `true` (boolean) | Set the curser to a solid blink or smooth blink effect. |
callbackNext | `null` (function) | Callback function called every text item. See `Callback functions` below.
callbackType | `null` (function) | Callback function called every 'letter'. See `Callback functions` below.
callbackFinished | `null` (function) | Callback function called once everything is finished. See `Callback functions` below.
Methods
-------
**teletype.setCursor(string cursor)**
Change the cursor value. Can be used at any time although particularly useful
when combined with callback functions.
Deleting characters `~`
---
It is possible to delete a defined number of characters then proceed with the rest of the text output.
Use `~x` within the text string, where x is an integer value defining the characters to backspace.
Example, type "auti", delete 1 character and continue to type "o", resulting in the word "auto":
```
auti~1o^`
```
Pause / Delay `^`
---
Delay typing the next character using `^x` where x in an integer value of milliseconds to pause.
To pause for 2 seconds after typing the word "pause" before continuing to type:
```
pause^2000 more
```
Line Breaks `\n`
---
Line breaks can be added using `\n`, which are converted to `
` during output.
Generated Markup
---
The following markup is used to output the teletype text.
```
[prefix]
[string]
[cursor]
```
This provides the ability to customise the style of the output text in your CSS.
Callback functions
---
There are two callback functions available, `callbackNext` and `callbackType`.
**Using the `callbackNext` callback**
Called every time a new text item begins. Two parameters are passed back here,
`current` and `teletype`.
The `current` object holds details of the current text and position pointers.
```
current = {
string: '', // The full text line being written.
index: 0, // Array index of the text array.
position: 0, // Character index position within the current text string.
loop: 0 // Current loop number, increments if settings.loop is enabled.
};
```
The second parameter `teletype` returns the teletype object itself, allowing
you to easily interact with the teletyper.
Example, change the cursor when moving to the 3rd text item (index 2).
```
callbackNext: function( current, teletype ) {
if ( current.index == 2 ) {
teletype.setCursor( '▋' );
}
}
```
**Using the `callbackType` callback**
Callback function called every 'letter', when either typing or deleting output.
There are three parameters used here, `letter`, `current` and `teletype`.
The value of `letter` is the text that will be written, usually a single
character but can be HTML markup for special characters.
The other two parameters are the same as those used by `callbackNext` (see above).
```
callbackType: function( letter, current, teletype ) {
if ( current.index == 2 && current.position == 13 ) {
teletype.setCursor( '_' );
}
}
```
**Using the `callbackFinished` callback**
Callback function called immediately once the teletype process is entirely finished.
The single parameter `teletype` returns the teletype object itself.
```
callbackFinished: function( teletype ) {
alert( 'Nothing left to type!' );
}
```
Minification
---
The Minified version of this script was provided by UglifyJS 2 - an online version can be found at .