how to create a Typing Effect, an Eraser Effect and a Blinking Cursor using jQuery

Typer by Lily-D-Ray on deviantART

First have a look at the demo page (or this pen) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.

For the blinking cursor effect, we’re going to simulate a DOS prompt. The HTML code includes just a paragraph that acts as a wrapper, a span tag which contains the characters “C:\” (the DOS prompt), and another one which contains the “|” character, which will act as our cursor:

To make the cursor blink, we will create a Javascript function named cursorAnimation(). Using jQuery’s animate() function, we first have to make the cursor disappear setting its opacity setting to 0%, and then appear again setting its opacity setting to 100%:

We want this function to run continuously as soon as the page loads, so we’re going to use the jQuery’s $(document).ready() function along with the setInterval() method which calls a function at specified intervals (in milliseconds):

Now that we have the blinking cursor, we’re going to create the typing effect (based on this tutorial). First, we have to modify our HTML code. We will include a span tag in which all the typing and the erasing will happen, a text input so we can write our preferred caption, and a button to test the typing effect:

Moving to the JavaScript part, we define the variables captionLength and caption. When the button is pressed (we add a click handler in the $(document).ready() function), it calls the testTypingEffect() function, that sets the text input’s value to the caption variable, and then calls the type() function.

The type() function uses the substr() method to cut our preferred caption one letter forward each time it’s called, and type it inside the caption span tag. Until all the letters of the caption are typed, the type() function calls itself with a delay of 50 milliseconds, using the setTimeout() method.

Here’s how our JS code looks so far:

For the eraser effect, we will modify again the html code, adding another button which, when pressed, will call the testErasingEffect() function. The final html code looks like this:

To create the eraser effect, we’ll create the reversed process. The testErasingEffect() function sets the caption span tag’s content to the caption variable, and then computes its length.

If there isn’t any content, it adds automatically some sample content (just for testing reasons). Now that it has some content, it calls the erase() function, which cuts the caption letter-by-letter until it’s all gone, with a delay of 50 milliseconds.

We also need to add a click handler for the erase button. Here are the changes (I’m omitting the functions where nothing changed):

If you haven’t done it already, have a look at the demo page (or this pen) to test the effects. You can also download the tutorial’s source code.

Photo by ~Lily-D-Ray

  • http://erikrp.com Erik

    Is it possibly to modify the script to loop in a cycle. With each separate text line, it first types it, then erases it, and then types the next text line, etc….

    Many thanks.
    Erik

  • Michael

    I’m also interested to know if what Erik asked is possible?

    Any help would be much appreciated.

    Thank you,

    Michael

  • Stathis

    Hello Eric & Michael. I didn’t read Erik’s comment until now.

    Off the top of my head, you could place each separate line into an array and then modify the typing and erasing functions so they can work together (for example, when the typing is finished, the typing function itself calls the erasing function). Then, you can iterate through the array and for each line you can call the typing function, wait for it to finish etc.

    I’ll try to work on an example when I find the time, most likely during the weekend.

  • Stathis

    Hello again,

    You can find an example for what I described in the previous comment here. (source code)

    Let me know of any issues/suggestions/questions.

  • Ryan

    Very nice. This is exactly what I was looking for (with the multiple lines effect). Thanks to Erik and Michael for the asking…and Burnmind (author) for the doing. Wondering now how to go about having this run automatically when a page finishes loading (instead of having to click a button)?

  • Stathis

    @Ryan: Just add type(); in the $(document).ready function.

  • Ryan

    Thank you. Worked perfectly. I’ve also been trying to make it continue to display the last line when it’s completed (instead erasing it)? Is that an easy change as well?

  • Stathis

    In the type() function, wrap the call to the erase() function in an if statement like this:

    if(index < lines.length-1) { setTimeout("erase()", 500); }

  • Ryan

    Uh oh. You lost me. I tried that in a few different places and just keep breaking the function (sorry…bit of a jquery noob here). Could I bother you for the full source code for that?

  • Stathis

    Replace the type() function with the following:

    function type()
    {
    if(index < lines.length) { caption = lines[index]; $('p.caption').html(caption.substr(0, captionLength++)); if(captionLength < caption.length+1) { setTimeout("type()", 50); } else { captionLength = caption.length; if(index < lines.length-1) { setTimeout("erase()", 500); } index++; } } }

  • Ryan

    That seems to break it as well. Could I possibly PM/email you for some help? so I don’t fill up the comments :(

  • Stathis

    I didn’t notice that the “<" character made the if condition to be treated as an html tag. I fixed it, so try again using the code in the previous comments. Now it should work properly.

  • Ryan

    Perfect. Thank you very much! Very impressive respond times too. I’ll have to peruse your site now and see what other helpful information you’re sharing. Thanks again.

    Hmmm…just an afterthought – would it be easily doable to have the TypeWriter effect display multiple lines at the same time (and cursor blink only at the end of the last line)? Or is that going too far?

  • Stathis

    You’re welcome.

    Try to do it as a homework. ;-)

    Some ideas:
    – The line is being written in the “caption” paragraph. You could have multiple paragraphs (with different IDs instead of the same class) acting as the multiple lines.

    – Duplicate some of the typing/erasing effect code to make it work for all the paragraphs simultaneously. It might not be the pest practice, but it will get you going.

    – The cursor is irrelevant of the typing effect, and it blinks wherever you place the paragraph with the class “cursor”.

  • carnew

    Nice coding, very useful. Thanks

  • http://www.zunskigraphics.com lance

    very cool. I’m about to dig in and make it repeat on finishing the last string in the array.

  • Mark

    Hey, just wanted to express my thanks for this helpful tip/tutorial.
    To expand on the comments, you can loop/repeat the array by adding the code below:

    if(index==lines.length)
    {
    index = 0;
    }

    (put it in the type() function directly below the “index++;” line)

  • http://scuba323.com Stephen

    I need help with the auto typing portion. Where does the type(); go?

  • http://scuba323.com Stephen

    nevermind i got it :P

  • Dan

    Building on the code you gave for looping through the array of text, how would I go about deleting say the first two words of the first line, then simply typing some extra content. So:

    Line 1 : Hello Line One

    Delete to: Hello Line

    Line 2: Hello Line Two

    Delete to: Hello Line

    Line 3: Hello Line Three

    etc etc

    Thanks in advance

  • Stathis

    @Dan, is this what you want?

    It is quite possible that there is a more efficient way to accomplish it, but I believe it does what you described. :)

    • SUKHPREET KHAIRA

      Pls if you provide this example with autorun so no need to click on button

      • http://burnmind.com/ StathisG

        You can call the type() function from the $(document).ready() function, for example:

        
$(document).ready(function() {
    setInterval ( "cursorAnimation()", 600 );
    type();
});
  • Dan

    Thanks,

    That was perfect ;)

  • Eugene

    I noticed that once you write enough text to require two lines, the cursor area will suddenly appear below the caption area and not the to right of it. Any quick fixes for this?

  • Steve Davis

    Is there any chance someone could post the entire source of this example, but with the typing happening automatically rather than clicking the form button?

    I know there was a previous comment that stated “Just add type(); in the $(document).ready function.” but it would be really appreciated if someone could post the entire .js for newbies like me for which nothing seems to work for =)

    I’ve tried putting it in but nothing seems to get it to work. I’d appreciate the help!

    thanks,
    steve

    • Stathis

      After a refactoring of the code, I changed some of the functions’ names. Therefore, based on how the code looks right now, you can do either of the following:

      – Enter testTypingEffect(); in the $(document).ready function, and the function will capture and “type” whatever is typed into the text input, i.e. “Type something here!” (example).

      – Enter a default caption which is not blank (e.g. var caption = 'this is a default caption'; and then call the type(); function inside $(document).ready (example).

      Of course, based on your needs you can remove functions (e.g. the test functions) and elements (e.g. the input box and the buttons) that are useless to what you’re building.

      I hope that helps!

  • Dan

    Hey, not sure if you’re still here 6 years later, but is there anyway to adjust the code to have multiple “captions”? I’d like to have it so that each paragraph, heading etc will be typed out.
    Thanks :)
    (I’ve already modified so it will just automatically type the text when the page loads)

  • Amid Vokuirk

    Hi Stathis!

    Is it possible to fix the script so that after clicking on the button the old text does not disappear?