jQuery Plugin For Text Typing & Deleting Effects - AddTyping

AddTyping is a simple yet customizable jQuery plugin for creating text typing & deleting effects to simulate a typewriter effect on the webpage. Also can be used as a text rotator which allows to switch between text spans with typing & deleting effects.

How to use it:

1. Import the addTyping.js script and its dependencies into the webpage.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="Obj.js"></script>
<script src="addTyping.js"></script>

2. Add a group of text you want to print in the webpage. To initialize the plugin automatically, just add the data-addui='typing' attribute to the parent container as this:

<div data-addui='typing'>
  <span>Hello World!</span>
  <span>What is your name?</span>
  <span>Goodbye!</span>
</div>

3. Create the blinking cursor using CSS and CSS3 animations.

.addui-Typing-caret {
  display: inline-block;
  position: relative;
  top: -1px;
  font-size: 1.25em;
  padding: 0 1px;
}

.addui-Typing-blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes 
  blink-animation {  to {
   visibility: hidden;
  }
}

@-webkit-keyframes 
  blink-animation {  to {
   visibility: hidden;
  }
}

4. Here are some useful options to customize the text typing effect.

$("[data-addui=typing]").addTyping({

  // animation speed
  speed: 350,

  // Each key stroke's speed will vary (+ or -) up to this amount (milliseconds) giving it a more human like look.
  variance: 100,

  // delete text after completed
  backspace: true,

  // delay
  pause: 3000,

  // shows the blinking cursor
  caret: true

});

---

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