Custom Typing/Deleting Animations For Input - jQuery Typingeffect

Typingeffect is a jQuery plugin that applies custom CSS3 powered animations to characters when typing and deleting characters in an input field.

How to use it:

1. Create a regular input field on the page.

<input type="text" name="fname" id="example" class="demo">

2. Place jQuery JavaScript library and the Typingeffect plugin's script right before the closing body tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="typingeffect.js"></script>

3. Initialize the jQuery Typingeffect plugin on document ready.

$(function(){

  $("#example").typingeffect();

});

4. The example CSS/CSS3 rules for the typing & deleting animations.

.frame {
  width: 100%;
  display: inline-block;
  outline: none;
  position: absolute;
  top: 0px;
  z-index: 9;
}

.txtBox {
  font-family: 'Roboto', sans-serif;
  width: auto;
  height: auto;
  color: #f8b82e;
  font-size: 25px;
  text-align: center;
  display: inline-block;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  -ms-transform: scale(20, 20);
  /* IE 9 */
  -webkit-transform: scale(20, 20);
  /* Safari */
  transform: scale(20, 20);
  /* Standard syntax */
  opacity: 0;
}

.animate {
  -ms-transform: scale(1, 1);
  /* IE 9 */
  -webkit-transform: scale(1, 1);
  /* Safari */
  transform: scale(1, 1);
  /* Standard syntax */
  opacity: 1;
}

.delanimate {
  -ms-transform: scale(10, 10);
  /* IE 9 */
  -webkit-transform: scale(10, 10);
  /* Safari */
  transform: scale(10, 10);
  /* Standard syntax */
  opacity: 0;
}

.scale {
  transform: scale(1, 1);
  transition: transform 0.5s ease;
}

5. Set the max length of the input field.

$(function(){

  $("#example").typingeffect({
    maxlength: 120
  });

});

---

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