Simulate Typing And Deleting Text With jQuery - qwerty.js
| File Size: | 7.95 KB |
|---|---|
| Views Total: | 2110 |
| 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.











