Post
Ask Question

Text Effect V3 Using jQuery and JavaScript

Introduction

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

LIVE DEMO

Text effect V3

To implement this effect we need the following things.

  • First of all we need one div, let's say a "text" element that will contain our text block.
  • We are also required to 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 also need a timer. That timer will control the speed of our effect.
  • Apart from the necessary things described above we also need a slider below the "text" div so that the user can adjust the speed of animation using it.

HTML for Text Effect V3

<!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;
}
.eft-b {
    margin-top: -20px;
    font-size: 50px;
}

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];
        $("#text > p").append("<span class='eft-b' id='ef" + i + "'>" + text[i] + "</span>");
        $("#ef" + i).hide().show("explode", {}, 1000).removeClass("eft-b");
        i++;
        if (i >= text.length) {
            clearInterval(iId);
            $("#text > p").text("");
            $("#text > p").text(text);
        }
    }
    $("#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 19 is 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 done in line number 14. This function is a bit more complex than it looks at first. In line number 10 we are adding a span tag containing only one character. In line number 11 we are hiding this element and then showing it with the animation. This is the main line that is causing the text animation.
  5. In line numbers 15 and 16 we are removing all the spans we added earlier for animation and they are replaced with entire text. This keeps our DOM short.
  6. Line numbers 20-31 define a jQuery slider with some options.
  7. Line numbers 23-29 are the part of one slide event handler. This event handler is executed when the slider is changed.
  8. The slider handler clears all the text, resets the timer and initiates an animation with new timings.

Output

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 comments.

LIVE DEMO


Similar Articles