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
下载代码说明
X关闭

jQuery实现可自定义打字参数的打字机文字特效源码

这是一款jQuery打字机文字特效插件，它不仅代码很小，而且可以进行灵活的参数配置，让我们开发者使用起来非常方便。并且备有多种显示效果的打字特效。是一款非常优秀的特效源码。该源码兼容目前最新的各类主流浏览器。