Animate Characters In Text Field While Typing - jQuery typingEffect

Animate Characters In Text Field While Typing - jQuery typingEffect
File Size: 4.99 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.