text typewriter effect typechar - Download Print Text Node With A Typewriter Effect - jQuery typeChar

Download Print Text Node With A Typewriter Effect – jQuery typeChar

By Posted on

This time I will share jQuery Plugin and tutorial about Print Text Node With A Typewriter Effect – jQuery typeChar, hope it will help you in programming stack.

text typewriter effect typechar - Download Print Text Node With A Typewriter Effect - jQuery typeChar
File Size: 13.8 KB
Views Total: 1961
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The typeChar is might be the minimalist jQuery plugin for the typing animation that prints text nodes (with styles and tags) with a typewriter effect.

How to use it:

1. Insert the minified version of the typeChar plugin after loading jQuery library.

view source
1 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous">
4 </script>
5 <script src="dist/jquery-type-char.min.js"></script>

2. Call the function on the target container in which you want to print the text.

view source
1 <div class="container">
2  
3 </div>
view source
1 $(function(){
2  
3   $('.container').typeChar();
4  
5 });

3. Set the text node you want to print out.

view source
1 $(function(){
2  
3   $('.container').typeChar({
4     html: $('<h3>jQueryScript.Net</h3>')
5   });
6  
7 });

4. Perform a function after the typing animation is completely finished.

view source
1 $(function(){
2  
3   $('.container').typeChar({
4     html: $('<h3>jQueryScript.Net</h3>'),
5     completed: $.noop
6   });
7  
8 });

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

source : jquery.net

Related posts: