Simple Configurable Text Typing Animation - jQuery Typing-Effects

Just another terminal-like typing animation plugin for jQuery that makes it possible to prints and rotates through an array of strings character by character.

How to use it:

1. Create a container element where you want to print out the strings.

<span id="typed"></span>

2. Create a cursor element that appears at the end of the strings while typing.

<span class="cursor"></span>

3. Include jQuery library and the jQuery Typing-Effects plugin's script at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="typingEffect.js"></script>

4. Initialize the plugin and define an array of strings in the JavaScript as follows:

$("#typed").typing({
  strings: ['string 1', 'string 2', 'string 3']
});

5. Animate the cursor in the CSS.

@-webkit-keyframes blink {
  0% {
      opacity:1;
  }

  50% {
       opacity:0;
  }

  100% {
      opacity:1;
  }
}

6. Customize the text typing animation by override the plugin settings as shown blow:

$("#typed").typing({

  // time before backspacing in milliseconds
  eraseDelay: 10,

  // time before typing in milliseconds
  typeDelay: 70,

  // time before string typing in milliseconds
  stringStartDelay: 1000,

  // text color
  color: 'red',

  // text color when typing
  typingColor: 'black',

  // opacity when typing
  typingOpacity: '0.1',

  // amount of loops
  loopCount: 3,

  // shows blink cursor
  cursorBlink: false,

  // character for cursor
  cursorChar: '<small>_</small>',

  // enables fade animation
  fade: true

});

7. Callback functions.

$("#typed").typing({

  onTyping: function () {
      console.log('onTyping');
  },

  onFinishedTyping: function () {
      console.log('onFinishedTyping');
  },

  onErasing: function () {
      console.log('onErasing');
  },

  onFinishedErasing: function () {
      console.log('onFinishedErasing');
  },

  onAllTypingCompleted: function () {
      console.log('onAllTypingCompleted');
  },
  
  onFinishedFadeErasing: function () {
      console.log('onFinishedFadeErasing');
  }

});

About Author:

Author: Jeya Prakash

Website: https://github.com/Jeya-Prakash/Typing-Effects-JQuery-Plugin

---

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