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

there are 28 comments:

  • 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

    Reply to comment ↓
  • I’m also interested to know if what Erik asked is possible?

    Any help would be much appreciated.

    Thank you,

    Michael

    Reply to comment ↓
  • 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.

    Reply to comment ↓
  • 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.

    Reply to comment ↓
  • 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)?

    Reply to comment ↓
  • @Ryan: Just add type(); in the $(document).ready function.

    Reply to comment ↓
  • 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?

    Reply to comment ↓
  • 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);
    }

    Reply to comment ↓
  • 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?

    Reply to comment ↓
  • 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++;
    }
    }
    }

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

    Reply to comment ↓
  • 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.

    Reply to comment ↓
  • 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?

    Reply to comment ↓
  • 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”.

    Reply to comment ↓
  • Nice coding, very useful. Thanks

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

    Reply to comment ↓
  • 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)

    Reply to comment ↓
  • Pingback: 10 Best jQuery Tutorials For Text Effect - Design Freebies

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

    Reply to comment ↓
  • nevermind i got it :P

    Reply to comment ↓
  • 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

    Reply to comment ↓
  • @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. :)

    Reply to comment ↓
  • Thanks,

    That was perfect ;)

    Reply to comment ↓
  • 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?

    Reply to comment ↓
  • 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

    Reply to comment ↓
    • 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!

      Reply to comment ↓
  • Pingback: The outcome of my "propose a tutorial" experiment (plus a few replies to users' questions) | burnmind.com

Leave a Reply

Thanks for leaving a comment. Please do not post spammy comments just to get some backlinks; all links are "nofollow" and the spammy comments will be deleted.