Simulate Typing And Deleting Text With jQuery - qwerty.js

File Size: 7.95 KB
Views Total: 2082
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simulate Typing And Deleting Text With jQuery - qwerty.js

qwerty.js is a super tiny jQuery plugin which makes it easier to simulate typing and deleting text letter by letter on your webpage. With a configurable blinking cursor. Also known as the typewriter effect.

How to use it:

1. Insert the jQuery qwerty.js script into the document which you've loaded the latest jQuery library.

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

2. Create a container where you want to display the text typing/deleting effects.

<h1></h1>

3. Initialize the plugin on the container element and define your own text strings to type out.

$('h1').qwerty({
  typerString: "jQuery qwerty.js Plugin"
}

4. If you want to delete the text strings:

$('h1').qwertyDel()

5. Adjust the typing speed in milliseconds.

$('h1').qwerty({
  typerString: "jQuery qwerty.js Plugin",
  delay:100,
}

6. Config the blinking cursor that will be displayed at the end of the text content while typing/deleting.

$('h1').qwerty({
  typerString: "jQuery qwerty.js Plugin",
  cursor:'|', 
  cursorBlink:100
}

7. Execute a callback function when the typing/deleting effect is completely finished.

$('h1').qwerty({
  typerString: "jQuery qwerty.js Plugin",
  cursor:'|', 
  cursorBlink:100
},function(){
  // do something here
}

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