Simulating Typing Deleting Selecting Text With jQuery typewrite - Download Simulating Typing, Deleting And Selecting Text With jQuery - typewrite

Download Simulating Typing, Deleting And Selecting Text With jQuery – typewrite

By Posted on

This time I will share jQuery Plugin and tutorial about Simulating Typing, Deleting And Selecting Text With jQuery – typewrite, hope it will help you in programming stack.

Simulating Typing Deleting Selecting Text With jQuery typewrite - Download Simulating Typing, Deleting And Selecting Text With jQuery - typewrite
File Size: 10.2 KB
Views Total: 5569
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

typewrite is a tiny jQuery typing animation plugin which allows to simulate someone typing, deleting and selecting given words defined in the JavaScript.

Basic usage:

1. Add the JavaScript file typewrite.js to the webpage, after you’ve loaded jQuery library.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="src/typewrite.js"></script>

2. Create an empty DIV container in which your want to print the text.

view source
1 <div id="typewriteText"></div>

3. Attach the plugin to the container element and define type/remove/select/delay actions and text as JS objects to the actions array as follows:

view source
01 $('#typewriteText').typewrite({
02   actions: [
03     {type: 'Hello. '},
04     {type: '<br>'},
05     {type: 'Weclome '},
06     {delay: 1500},
07     {remove: {num: 1, type: 'stepped'}},
08     {select: {from: 11, to: 16}},
09     {delay: 2000},
10     {remove: {num: 5, type: 'whole'}},
11     {delay: 300},
12     {type: 'lcome to typewrite. '},
13     {type: '<br>'},
14     {type: 'It's so easy to setup and use.'}
15   ]
16 });

4. Default settings for the typing animation.

view source
01 $('#typewriteText').typewrite({
02  
03   // typing speed
04   speed: 12,
05  
06   // blinking speed
07   blinkSpeed: 2,
08  
09   // show blinking cursor
10   showCursor: true,
11  
12   // enable blinking cursor
13   blinkingCursor: true,
14  
15   // cursor character
16   cursor: '|',
17  
18   // background color of selected text
19   selectedBackground: '#F1F1F1',
20  
21   // font color of selected text
22   selectedText: '#333333'
23    
24 });

5. Events.

view source
01 $('#typewriteText')
02 .on('typewriteStarted', function() {
03     // typewrite has started
04 })
05 .on('typewriteComplete', function() {
06     // typewrite has complete
07 })
08 .on('typewriteTyped', function(event, data) {
09     // typewrite has typed', data);
10 })
11 .on('typewriteRemoved', function(event, data) {
12     // typewrite has removed', data);
13 })
14 .on('typewriteNewLine', function() {
15     // typewrite has added a new line
16 })
17 .on('typewriteSelected', function(event, data) {
18     // typewrite has selected text', data);
19 })
20 .on('typewriteDelayEnded', function() {
21     // typewrite delay has ended
22 })

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

source : jqueryscript.net

Related posts: