Print Text Line By Line With A Typing Animation - typeWriter
File Size: | 3.07 KB |
---|---|
Views Total: | 2691 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A bare-bones jQuery plugin to simulate the typewriter effect that prints an array of strings line by line with a typing animation.
How to use it:
1. Download and place the JavaScript file jquery.hugo-decoded.typewriter.min.js
script after jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery.hugo-decoded.typewriter.min.js"></script>
2. Create a container element in which you want to print the text.
<div id="typewriter"></div>
3. Call the function on the container element and define an array of text you want to print.
$(function(){ $('#typewriter').typewrite( { text: [ "This is line 1", "This is line 2", "This is line 3", "This is line 4", "This is line 5" ] ); });
4. Change the default typing speed.
$(function(){ $('#typewriter').typewrite( { text: [ "This is line 1", "This is line 2", "This is line 3", "This is line 4", "This is line 5" ], speed: 100 // in ms ); });
This awesome jQuery plugin is developed by hugo-decoded. For more Advanced Usages, please check the demo page or visit the official website.