Simple Configurable Text Typing Animation - jQuery Typing-Effects

Simple Configurable Text Typing Animation - jQuery Typing-Effects
File Size: 3.08 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" 
<script src="typingEffect.js"></script>

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

  strings: ['string 1', 'string 2', 'string 3']

5. Animate the cursor in the CSS.

@-webkit-keyframes blink {
  0% {

  50% {

  100% {

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


  // 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.


  onTyping: function () {

  onFinishedTyping: function () {

  onErasing: function () {

  onFinishedErasing: function () {

  onAllTypingCompleted: function () {
  onFinishedFadeErasing: function () {


About Author:

Author: Jeya Prakash


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