Simulate Typing Out Text Strings - jQuery HumanTyping

Simulate Typing Out Text Strings - jQuery HumanTyping
File Size: 8.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.