Post
Ask Question

Basic Text Insert Effect Using JavaScript and jQuery

Introduction

In this article we will create a text effect using JavaScript. This effect shows a character input one by one instead of an entire block at a time. The timing of the effect can also be customized using a slider. So let's start our explanation.

LIVE DEMO

Text effect V1

To implement this effect we need the following things.

  • First of all we need one div, let's say "text", element that will contain our entire effect.
  • We are also must have one paragraph of text on which we will apply our effect. This paragraph is to be placed inside the "text" div.
  • To control the effect we are also required to have one timer. That timer will control the speed of our text effect.
  • Apart from the above necessary things I'm also placing a slider below the "text" div so that the user can adjust the speed of animation using it.

HTML for slider

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="Text effect" />
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <div id="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="slider"></div>
    <div id="val">100</div>
</body>
</html>

CSS for slider

#text {
    width: 400px;
    height: auto;
    border: 1px solid;
}
#slider {
    display: inline-block;
    margin: 10px 0 0 10px;
    width: 300px;
}
#val {
    display: inline-block;
    width: auto;
    height: 20px;
    border: 1px solid;
}

JavaScript for Slider

$(document).ready(function() {
    var text = $("#text > p").text();
    $("#text > p").text("");
    var i = 0;
    var iId;
    iId = setInterval(addChar, 100);
    function addChar() {
        var old = $("p").text();
        var n = old + text[i];
        $("p").text(n);
        i++;
        if (i >= text.length) {
            clearInterval(iId);
        }
    }
    $("#slider").slider({
        "min": 10,
        "max": 1000,
        "step": 100,
        slide: function() {
            clearInterval(iId);
            $("#text > p").text("");
            i = 0;
            iId = setInterval(addChar, $(this).slider("value"));
            $("#val").text($(this).slider("value"));
        }
    });
});

The code above works in the following ways.

  1. Line number 2 extracts all the text of the paragraph on which the effect is to be applied.
  2. Line number 3 clears the text of the paragraph after extracting the text in line number 2.
  3. Line number 6 initiates a timer with a 10 millisecond interval. After each interval the timer will call the "addChar" function. This timer can be identified using its interval id that is stored in iId.
  4. Line numbers 7 to 15 is the body of the "addChar" function. This function simply adds one character to a paragraph each time it is called. When all the characters are added to the paragraph the timer is canceled. This cancellation is performed in line number 13.
  5. Line numbers 16-18 defines a jQuery slider with some options.
  6. Line numbers 19-25 are the part of on slide event handler. This event handler is executed when the slider is changed.
  7. The slider handler clears all the text, resets the timer and initiates an animation with new timings.

Output

Output

Output

Output

Summary

That's all for this article. I hope you have enjoyed reading it and found it useful. In case of any doubt feel free to ask in the comments.

LIVE DEMO


Similar Articles