TypeIt

Try it!

Tweak the settings (optional), enter at least one string, and watch it go!
Wait, what do these settings actually do?
output box

Start Typing on Your Site!

To get it going, just initialize with a string:

Code <p class="example1"></p>

$('.example1').typeIt({
     whatToType: "You've just initialized this bad boy.",
     typeSpeed: 100
});
Output

Or, do it with data-typeit-* attributes:

Code <p class="example2" data-typeit-whattotype="This was defined with a data-typeit-* attribute." data-typeit-typeSpeed="100"></p>

$('.example2').typeIt();
Output

You can even use multiple strings that stack on each other:

Code <p class="example3"></p>

$('.example3').typeIt({
     whatToType: ["This is a string!", "And here's another one."],
     typeSpeed: 100
});
Output

Or use multiple strings that delete & replace each other:

Code <p class="example4"></p>

$('.example4').typeIt({
     whatToType: ["This is a great string.", "But here is a better one."],
     typeSpeed: 100,
     breakLines: false
});
Output

There are plenty of settings to tweak how you desire:


Option Description Default
whatToType The string or strings you'd like to type. "You probably want to replace this string."
typeSpeed The speed (milliseconds) at which you want to type. 250
lifeLike Choose whether the plugin types at a constant pace or irregular, lifelike pace. true
showCursor Choose whether you want the blinking cursor to appear when typing. true
breakLines Choose whether you want multiple strings to be printed on top of each other (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false). true
breakWait The amount of time between typing multiple strings. 500
delayStart The amount of time before the plugin begins typing after initializing. 250

Back to Top