jQuery Plugin To Type Out Text Character By Character - typeText

File Size: 7.08 KB
Views Total: 2241
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Type Out Text Character By Character - typeText

typeText is a very small jQuery plugin to simulate the typewriter effect that types each letter of a container one character at a time.

How to use it:

1. Wrap the text you want to print out inside a container as this:

<div class="print">
  <p>Text Content 1</p>
  <p>Text Content 2</p>
  <p>Text Content 3</p>
  ...
</div>

2. Load the JavaScript file jquery.typeText.js after jQuery library but before we close the body tag.

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

3. Active the typing effect on the text content within the container '.print':

$(".print").typeText();

4. You're also able to print any text strings set in the JavaScript as this:

$("#element").typeText("Text to print");

5. The full option list to customize the text typing effect.

$(".print").typeText({
  typeSpeed: 50,
  lineWait: 1000,
  then: function() {}
});

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