jQuery Plugin For Customizable Terminal Text Effect - TypeIt

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

Just another typewriter-style text animation plugin that simulates someone typing and deleting over an array of words. Wriiten in pure JavaScript and with no dependencies such as jQuery.

Basic usage:

1. Download & Install the library.

# Yarn
$ yarn add typeit

# NPM
$ npm install typeit --save

2. Import the TypeIt as a module.

import TypeIt from 'typeit';

3. Or directly load the TypeIt library from dist folder.

<script src="dist/typeit.min.js"></script>

4. Create a new TypeIt instance and specify the target element where text will be typed

new TypeIt('#textContainer');

5. Start the typing animation.

new TypeIt('#textContainer').go();

6. Plugin's default settings.

new TypeIt('#textContainer',{

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

  // shows cursor
  cursor: true,

  // cursor character
  cursorChar: "|",

  // bink speed
  cursorSpeed: 1000,

  // delete speed
  deleteSpeed: null,

  // 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,

  // Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. 
  startDelete: false,

  // The amount of time (in milliseconds) between typing multiple strings.
  nextStringDelay: 750,

  // 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,

  // Determines if the instance will begin typing automatically on .go(), or only when the target element becomes visible in the viewport. 
  waitUntilVisible: false,
  
});

7. Callback functions.

new TypeIt('#textContainer',{

    beforeStep: (step, queue, instance) => {
       // before each step in the queue.
    },

    beforeString: (step, queue, instance) => {
       // before each string in the queue.
    },

    afterStep: (step, queue, instance) => {
       // after each step in the queue.
    },

    afterString: (step, queue, instance) => {
       // after each string in the queue.
    },

    afterComplete: (instance) => {
       // after the entire instance has completed typing.
    },
  
});

8. More methods.

new TypeIt('#textContainer', {
    /;/ options here
})
.type('something to type')
.pause(300)
.break()
.delete(2)
.pause(250)
.options({speed: 100, deleteSpeed: 75})
.empty()
.exec() // fire any arbitrary function
.go();

Changelog:

v6.0.2 (2019-02-06)

  • Rewrite with no jQuery dependency.

v4.4.1 (2017-09-07)

  • Fix visibility bug, update docs.

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.