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

• August 28th, 2009
• tutorials
• 30

First have a look at the demo page (or this pen) to understand what we’re trying to accomplish. You can also [download id=”3″ format=”1″].

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:

<p class="console">
    <span>C:\</span>
    <span id="cursor">|</span>
</p>

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%:

function cursorAnimation() {
    $('#cursor').animate({
        opacity: 0
    }, 'fast', 'swing').animate({
        opacity: 1
    }, 'fast', 'swing');
}

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):

$(document).ready(function() {
    setInterval ('cursorAnimation()', 600);
});

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:

<p>
    <input type="text" id="user-caption" value="Type something here!" />
    <input type="button" id="test-typing" value="Test Typing Effect" />
</p>
<p class="console">
    <span>C:\</span>
    <span id="caption"></span>
    <span id="cursor">|</span>
</p>

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:

var captionLength = 0;
var caption = '';

$(document).ready(function() {
    setInterval ('cursorAnimation()', 600);
    captionEl = $('#caption');
    
    $('#test-typing').click(function(){
        testTypingEffect();
    });
});

function testTypingEffect() {
    caption = $('input#user-caption').val();
    type();
}

function type() {
    captionEl.html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1) {
        setTimeout('type()', 50);
    } else {
        captionLength = 0;
        caption = '';
    }
}

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:

<p>
    <input type="text" id="user-caption" value="Type something here!" />
    <input type="button" id="test-typing" value="Test Typing Effect" />
    <input type="button" id="test-erasing" value="Test Erasing Effect" />  
</p>
<p class="console">
    <span>C:\</span>
    <span id="caption"></span>
    <span id="cursor">|</span>
</p>

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):

$(document).ready(function() {
    setInterval ('cursorAnimation()', 600);
    captionEl = $('#caption');
    
    $('#test-typing').click(function(){
        testTypingEffect();
    });

    $('#test-erasing').click(function(){
        testErasingEffect();
    });
});

function testErasingEffect() {
    caption = captionEl.html();
    captionLength = caption.length;
    if (captionLength>0) {
        erase();
    } else {
        $('#caption').html("You didn't write anything to erase, but ok!");
        setTimeout('testErasingEffect()', 1000);
    }
}

function erase() {
    captionEl.html(caption.substr(0, captionLength--));
    if(captionLength >= 0) {
        setTimeout('erase()', 50);
    } else {
        captionLength = 0;
        caption = '';
    }	
}

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 id=”3″ format=”1″].

Photo by ~Lily-D-Ray