Terminal-like Text Typing Effect with jQuery - Teletype

Teletype is a very small jQuery plugin which allows you to output text with cool typing effects as you've seen in a terminal console.

Basic Usage:

1. Load jQuery library and the teletype script at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.teletype.js"></script>

2. Wrap the semicolon separated strings you wish to output into a container element. You can also create list of strings using object array in the javascript.

• jqueri~1 y^1000: type "jqueri": delete 1 character and continue to type "y", resulting in the word "jquery"
• jQuery \n jQueryScript.net: line breaks
• jQueryScript.net^2000: pause and delay time in ms

<p class="type-text" title="jqueri~1 y^1000  plugins.;jQuery,\njQueryScript.net^2000 , character deletion~20; auto delete^2000 , customisable cursor;">:)</p>

3. Initialize the plugin with options.

$( '.type-text' ).each( function() {
var items = $( this ).attr( 'title' ) + ';' + $( this ).text();
$( this ).empty().attr( 'title', '' ).teletype( {
  text: $.map( items.split( ';' ), $.trim ), // List of strings to output.
  typeDelay: 10, // Minimum delay, in ms, between typing characters.
  backDelay: 20, // Minimum delay, in ms, between deleting characters.
  blinkSpeed: 1000, // Interval, in ms, that the cursor will flash.
  cursor: '▋', // Character used to represent the cursor.
  delay: 3000, // Time in ms to pause before deleting the current text.
  preserve: false, // Prevent auto delete of the current string and begin outputting the next string.
  prefix: '[teletype ~]# ', // Begin each string with this prefix value.
  loop: 0, // Number of times to loop through the output strings, for unlimited use 0.
  humanise: true, // Add a random delay before each character to represent human interaction.
  smoothBlink: true, // Set the curser to a solid blink or smooth blink effect.
  callbackNext: null,
  callbackType: null,
  callbackFinished: null
});
});

Change logs:

2016-07-11

• Added smoothBlink option to cursor

2015-10-20

• Bug fix for new lines.

2015-10-17

• Added callback fired after type animation completion

2015-05-30

• Updated the commands syntax.

2015-05-27

• Updated spacing for consistency.

2015-05-24

• Preserve new lines on deletion.

2015-05-23

• Merge conflict resolutions.

2014-09-12

• Added humanise setting.

2014-09-11

• Parse delay as integer value.

---

This awesome jQuery plugin is developed by stvwhtly. For more Advanced Usages, please check the demo page or visit the official website.