jQuery Plugin For Configurable Text Typing Animation - jtap.js

jtap.js is a tiny yet fully controllable jQuery text animation plugin which mimics the typewriter typing animation featuring lots of customization options and callback functions.

How to use it:

1. Place the latest version of jQuery library and jQuery jtap.js script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.jtap.min.js"></script>

2. Wrap the text into a wrapping element.

<p class="demo">
  Line 1,<br>
  Line 2,<br>
  Line 3,<br>
  Line 4.
</p>

3. Call the function to apply a default typing animation to the text.

$('p.demo').jtap();

4. Style and animate the mouse cursor.

.jtap {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.jtap.jtap-cursor:after {
  content: "|";
  font-weight: 100;
  display: inline-block;
  opacity: 1;
}

.jtap.jtap-cursor.jtap-idle:after {
  -moz-animation: blink 1.1s steps(5, start) infinite;
  -webkit-animation: blink 1.1s steps(5, start) infinite;
  animation: blink 1.1s steps(5, start) infinite;
}

@-moz-keyframes 
blink {  to {
 visibility: hidden;
}
}

@-webkit-keyframes 
blink {  to {
 visibility: hidden;
}
}
 @keyframes 
blink {  to {
 visibility: hidden;
}
}

5. Customize the typing animation with the following options.

$('p.demo').jtap({

  // displays mouse cursor
  cursor: true,

  // start delay time in ms
  startDelay: 0,

  // animation speed
  speed: 50,

  // backspace animation
  backspaceSpeed: 200,

  // randomizes speed of typing single char
  humanize: true,

  // skips HTML tags
  skipTags: true

});

6. Callback functions.

$('p.demo').jtap({

  // triggered before startying typing
  onStart: null,

  // triggered before type char
  onTypeBefore: null,

  // triggered after char is typed
  onTypeAfter: null,

  // triggered when typing is end
  onComplete: null

});

7. API methods.

// pauses the typing animation
$('p.demo').jtap('pause',[optional pause time in miliseconds]);

// resets the typing animation
$('p.demo').jtap('reset',[optional pause time in miliseconds]);

// ressumes the typing animation
$('p.demo').jtap('resum');

---

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