Print Text Node With A Typewriter Effect - jQuery typeChar

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

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.

See also:

How to use it:

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

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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.

<div class="container">

</div>
$(function(){

  $('.container').typeChar();

});

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

$(function(){

  $('.container').typeChar({
    html: $('<h3>jQueryScript.Net</h3>')
  });

});

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

$(function(){

  $('.container').typeChar({
    html: $('<h3>jQueryScript.Net</h3>'),
    completed: $.noop
  });

});

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