Introduction
In this article we will create a text effect using jQuery effects. This effect shows a stream of characters flowing one by one instead of an entire block at a time with the scaled upcoming characters as animation. The timing of the effect can also be customized using a slider. So let's start our explanation.
LIVE DEMO
Text effect V2
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 block of text.
- 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.
- We also need one class that will contain the settings for animated text. We will apply this class on each character and remove it once the animation gets over.
- To control the effect we are also required to have one timer. That timer will control the speed of our effect.
- Apart from above necessary things we are also required a slider below the "text" div so that user can adjust the speed of animation using it.
HTML for Text Effect V2
<!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;
position:fixed
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{
color:red;
font-size:50px;
}
JavaScript for Slider
-
$(document).ready(function(){
-
var text=$("#text > p").text();
-
$("#text > p").text("");
-
var i=0;
-
var iId;
-
var time=100;
-
iId=setInterval(addChar,time);
-
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();
-
$("#ef"+i).removeClass("eft-b",1000);
-
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;
-
time=$(this).slider("value");
-
iId=setInterval(addChar,time);
-
$("#val")
-
.text($(this).slider("value"));
-
}
-
});
-
});
The code above works in the following steps:
- Line number 2 extracts all the text of the paragraph on which the effect is to be applied.
- Line number 3 clears the text of the paragraph after extracting the text in line number 2.
- Line number 7 initiates a timer with a 100 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.
- Line numbers 8 to 21 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 a paragraph the timer is canceled. This cancellation is performed in line number 16. This function is a bit more complex than it first appears to be. In line number 11 we are adding a span tag with "eft-b" class containing only one character of text. In line number 12 we are hiding this element and then showing it with the animation. Line number 13 is the main line that is causing the text animation.
- In line numbers 17 and 18 we are removing all the spans we added earlier for animation and they are replaced with the entire text. This keeps our DOM short.
- Line numberw 22-34 defines a jQuery slider with some options.
- Line numbers 25-33 are part of the slide event handler. This event handler is executed when the slider is changed.
- The slider handler clears all the text, resets the timer and initiates an animation with new timings.
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