jQuery Plugin For Customizable Terminal Text Effect - TypeIt

jQuery Plugin For Customizable Terminal Text Effect - TypeIt
File Size: 18.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery typewriter-style text animation plugin that simulates someone typing and deleting over an array of words.

Basic usage:

1. Include jQuery library and the jQuery TypeIt plugin's files on the html page.

<link rel="stylesheet" href="dist/typeit.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/typeit.min.js"></script>

2. Create an empty element that will act as the container for the TypeIt plugin.

<span class="typeit-box"></span>

3. Call the function on the container and specify what you want to type.

$('.typeit-box').typeIt({
  whatToType: ['A jQuery plugin that types stuff for you.'],
  typeSpeed: 100
});

4. Plugin's default settings.

$('.typeit-box').typeIt({

  // what to type
  strings: 'You need a string!',

  // typing speed
  speed: 100,

  // delete speed
  deleteSpeed: undefined,

  // make the typing pace irregular
  lifeLike: false,

  // show cursor
  cursor: true,

  // Choose whether you want multiple strings to be printed on top of each other
  breakLines: true,

  // The amount of time between typing multiple strings.
  breakDelay: 750,

  // The amount of time before the plugin begins typing after initalizing.
  startDelay: 250,

  // Have your string or strings continuously loop after completing.
  loop: false,

  // The amount of time between looping over a string or set of strings again.  
  loopDelay: 750,

  // Handle strings as HTML, which will process tags and HTML entities
  html: true,

  // Auto start
  autoStart: true, 

  // A function that executes after your typing has completed
  callback: function(){}
  
});

5. You can also pass the options displayed below using data-OPTION attribute on container element.

<span class="typeit-box"
      data-typeit-whattotype="A jQuery plugin that types stuff for you."
      data-typeit-speed="100"
</span>
$('.typeit-box').typeIt();

Change logs:

v4.4.0 (2017-04-04)

  • add tiEmpty() companion function.

v4.3.0 (2016-12-02)

  • bugfix

v4.2.3 (2016-06-08)

  • improvement.

v4.2.0 (2016-06-07)

  • added deleteSpeed feather.

v4.0.0 (2016-05-25)

  • added more options

v3.0.1 (2016-02-15)

  • Fix non-working callback function option.

v3.0.0 (2016-02-09)

  • Code consolidation, remove CSS dependency, cursor options additions.

v2.0.2 (2016-01-21)

  •   Fix bug not allowing use of in-element string.

v2.0.1 (2016-01-08)

  • Add check for existence of array to delete.

v2.0.0 (2016-01-07)

  • Handle HTML tags, add loop and related options.

2015-11-19

  • v1.1.0

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