Simulate Typing And Deleting Text With jQuery - qwerty.js
File Size: | 7.95 KB |
---|---|
Views Total: | 2093 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.