Print Text Line By Line With A Typing Animation - typeWriter

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

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.