#typing effect

TheaterJS is a typing effect mimicking human behavior.

Everything you need to know is demonstrated and explained in this codepen

The demo is also available on the TheaterJS page.

New Post has been published on http://www.htmluse.com/jquery-typer-js-slick-typing-effect/

jQuery.typer.js - Slick typing effect

Download   Demo

jquery.typer.js is a best simple jQuery plugin for a slick typing effect.

1. INCLUDE JS FILES

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="src/jquery.typer.js"></script>

2. HTML

<h1>Hello, World!</h1> <h2 data-typer-targets="Hello,Hi,Hola,Hallo,Haai,Ola,Kaixo,Moni,Aloha,Bonjour,Ciao,Hej">Welcome</h2> <h2 data-typer-targets="abcdefgfedcba,afgfa">Welcome</h2>

That code will start the effect on all elements with the data-typer-targets attribute.

You obviously need to supply it with some source data. The data-typer-targets attribute can be either a comma-separated string or a piece of JSON.

3. JAVASCRIPT

$(function () $('[data-typer-targets]').typer(); );

4. OPTIONS

There are some options that are available to you as well:

// Defaults highlightSpeed : 20, typeSpeed : 100, clearDelay : 500, typeDelay : 200, clearOnHighlight : true, typerDataAttr : 'data-typer-targets', typerInterval : 2000

Set the options individually: