Animate Characters In Text Field While Typing - jQuery typingEffect

The jQuery typingEffect plugin applies awesome CSS3 powered animations to characters when typed in a text field. Supports both textarea and input elements.

Supported typing animations:

• zoom (default)
• blink
• ease
• rotate
• flipy
• flipx
• explode
• shake

How to use it:

1. Import the necessary JavaScript and CSS files into the document.

<link href="typingeffect.jquery.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="typingeffect.js"></script>

2. Call the function on the target text field and done.

<textarea class="typingeffect"></textarea>
<input type="text" class="typingeffect">

$(function(){
  $(".typingeffect").typingEffect();
});

3. Customize the typing animation.

$(function(){
  $(".typingeffect").typingEffect({
    animation:"zoom", // zoom,blink,ease,rotate,flipy,flipx,explode,shake
  });
});

5. Customize the duration of the typing animation.

$(function(){
  $(".typingeffect").typingEffect({
    duration:".4s"
  });
});

---

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