Typewriter-Effect for HTML with JavaScript

Question

I want to do the following: I want to have a typewriter effect in HTML/JavaScript (jQuery/jQuery UI, if needed). There are tons of great examples out there on how to create a typewriter effect on a string (for example this one). I want to do something similar, but with a complete HTML string, which shouldn't be typed out, but inserted properly into the web page.

Example string:

<p>This is my <span style='color:red;'>special string</span> with an <img src="test.png"/> image !</p>

This string should be typed with a typewriter animation. The color of "special string" should be red, even while typing, and the image should appear after the word "an" and before the word "image". The problem with the solutions out there is that they insert the markup character by character into the web page, which results in an unclosed while typing the "special string" in this example. I considered parsing the string with jQuery and iterating over the array, but I have no idea how I would deal with nested tags (like p and span in this example)

Answer 1

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

Answer 2

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 3

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>