Simulate Typing Out Text Strings - jQuery HumanTyping

HumanTyping is a lightweight, modern jQuery typing effect plugin that simulates someone typing out text strings character by character.

Supports any form text fields such as textarea and input field.

Ideal for animated placeholders for your form fields.

See also:

• 10 Best Text Typing Animations In jQuery Or Pure JS & CSS

How to use it:

1. Download and import the JavaScript jquery.humanTyping.min.js after jQuery (slim build).

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

2. Define an array of text strings you want to type out.

var strings = [
    "jQuery",
    "Script",
    ".Net",
    "jQuery Plugins",
    "more strings here..."
]; 

3. Call the function on the target element and pass the strings array to the humanTyping():

$(function(){

  $('element').humanTyping(typingPh);

});

4. Customize the typing speed by pass the speed option as the second parameter to the humanTyping method.

$(function(){

  $('element').humanTyping(typingPh, 100);

});

Changelog:

2019-06-29

• v2 - improved syntax and added text and speed options

---

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