jQuery Plugin For Terminal Text Typing Effect - Typewriter

File Size: 5.64 KB
Views Total: 1512
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Terminal Text Typing Effect - Typewriter

Typewriter is a very small jQuery plugin which simulates the terminal / typewriter like typing effect for your text and even html content.

How to use it:

1. Start by including jQuery library and the Typewriter plugin's script in your web project.

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

2. Type some text into a specific container using the typeIt method.

// .typeIt(Text, Delay, Format)
$('.demo').typeIt('Text to type', 0.06, 'text')

3. The plugin also supports HTML tags.

$('.demo').typeIt('Text to <br> type', 0.06, 'text')

4. Show / hide the cursor at the end of your text.

// hide
$('.demo')
  .typeIt('Text to type', 0.06, 'text')
  .hideCursor();

// show
$('.demo')
  .typeIt('Text to type', 0.06, 'text')
  .showCursor();

5. Apply a deleting effect as this:

// amount: the number of characters to delete
// rate: the base delay value
$('.demo')
  .typeIt('Text to type', 0.06, 'text')
  .delete(Amount,Rate)

6. Apply a deleting effect as this:

$('.demo')
  .typeIt('Text to type', 0.06, 'text')
  .pauseIt(0.5)

7. Clear all the text.

$('.demo')
  .typeIt('Text to type', 0.06, 'text')
  .clearIt()

8. Destroy the plugin.

$('.demo')
  .typeIt('Text to type', 0.06, 'text')
  .destroyIt()

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