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)

Solution 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

Solution 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();

Comments

[Brad Christie]

I won't down-vote, but this should realistically be; if you're going to reference an external site, at the very least place the relevant code on SO so people don't have to visit (and so it remains here for posterity).

[Fallenreaper]

I will Link code then

[Bojangles]

I've just realised this plugin is written in f****** Coffeescript, so you'll need to compile it to JS yourself. There are instructions in the readme

[Fallenreaper]

Never really dabbled with Coffee Script, but i heard good things. I think i might look into this to replace the current way i do mine, using a jTypeWritter jQuery plugin. Ill have to look at the particulars of it later.

[redV]

These days I am seeing people who are writing Coffeescript instead of JS in Github repo too. And I am hearing people who are saying plugins more times than number of times they have used var keyword in their code :)

[Philipp]

The idea behind your example is to incorporate a function for each html tag. I am looking for something more flexible, which can deal with more or less dynamic text input (The idea is that the server sends preformatted strings to a client, which types it out to the user)

[Fallenreaper]

my example makes use of Chaining a bunch of them together to give the illusion of a console. I am not sure if that is the idea you were thinking of doing or not, but by obtaining text from a server, you could easily say: $("<span />").append(_new_text_here).hide().appendTo(_target_).show()‌​.jTypeWriter({some:"‌​values", would:"go", here:"."})

[Philipp]

Thanks for the plugin - it really looks cool, but doesn't solve my problem. If I feed it the string from my example, it types it out without changing the color where it should.

[Philipp]

Hmm, I can't find the most recent version of jTypeWriter.js for evaluation - all the links I find point to nowhere...

[Fallenreaper]

The only version i can see is located at: pastebin.com/W85XGWcV

[Philipp]

Much simpler than the solution in the duplicate. Looks great - thanks! one question though (unrelated to the question above), what does surrounding your function with (..()) do? I always wanted to know, but didn't have the right keywords to google it..

[Tachun Lin]

@PhilippFlenker It's called a self-invoked function (anonymous function), it's returning a function object. When you append () to it, it is invoked and anything in the body is executed.

[Philipp]

is there any difference to creating a named function and executing it (except for the name, of course)?

[Leandro Faria]

Any chance you can simulate part of the text being selected? I wanted to create something really similar to this effect on HubSpot home page: www.hubspot.com

[dy_]

i modified this a bit. can be used as a function to all HTML elements that contain text. var animateText = function(element){ var str = element.innerHTML, i = 0, text; (function type() { text = str.slice(0, ++i); element.innerHTML = text; if (text === str) return; setTimeout(type, 90); }()); }

[Kaizokupuffball]

This is pretty nice. Would be nice to have a way that each time you call the function, it types the given string on a new line, and not replacing the old one.

[Aart den Braber]

Very nice and simple solution, kudos to you man. I created a very simple script with it that also allows for deleting some content (once, which was all I needed). jsfiddle.net/VG8MJ/651