Typewriter-Effect for HTML with JavaScript [duplicate]

Answer 1

There is a fantastic plugin available on Github, here. An example from the README looks like this:

It's nice and configurable depending on how human-like you want the output to be. A simple example looks like this:

var tw = typewriter($('.whatever')[0]).withAccuracy(90)
                                     .withMinimumSpeed(5)
                                     .withMaximumSpeed(10)
                                     .build();

Answer 2

I will forward you to my old website design which used it.

myWebsiteImplementsThis

It makes use of jTypeWriter.js, blink.js, and jquery.

In the source you will the code.

You would want to take a look at function start()

and that will start the login design. I actually put it on hiatus, because there are actually some minor issues IRL i am working on, but you can easily see a working example at least :)

code:

$(function(){
    start();
});
function start(){ 
    $("#start").show(); 
    setTimeout(ssh,1000);
}
function ssh(){
    $("#ssh").show().jTypeWriter({duration:2.5}); 
    setTimeout(pass,3000);
}
function pass(){
    $("#pass").show(); 
    setTimeout(...,2500);
}
/* etc etc */

Markup:

<pre id="start" style="display:none;">localhost$ <span id="ssh" style="display:none;">ssh fallenreaper@www.fallerneaper.com</span></pre>

Answer 3

I think you don't really need a plugin to do this stuff, I made a simple example:

html:

 <div id="typewriter"></div>

js:

var str = "<p>This is my <span style='color:red;'>special string</span> with an <img src='http://placehold.it/150x150'> image !</p>",
    i = 0,
    isTag,
    text;

(function type() {
    text = str.slice(0, ++i);
    if (text === str) return;

    document.getElementById('typewriter').innerHTML = text;

    var char = text.slice(-1);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(type, 80);
}());

And here is the demo on jsfiddle