Code Typing Text Animation – Array Loop Programming
Now it is possible to animate text using JavaScript and HTML and even without using Flash. As always, you can see it working live by clicking here or in the screenshots below.
Now without wasting any time lets begin by looking at the code below.
This uses only a few lines of code and is very easy to remember and easy to understand. As always we see a basic HTML body and we have a style section that does nothing and just give a background color to our DIV and a font color and some other basic things like that. Next is the main section. That is the JavaScript section.
First we will create a variable that will consist of the line that we want to be typed in web browser. It could be any warning or advise. Next we split each and every word of the line using string.split(“”). Now again we create a variable that is an empty variable and would be used later to set the speed of typing text.
Now we create a function . We can name it anything. Here first we will check is there any text in our variable and if the value is greater than 0, than it starts typing and if the text is finished it will clear the timeout and stop the animation. Here it is how it works. For Eg:- our line contains 10 words and those are “Hey There!” when we will use ourline.spilt(“”) function it will count each word as one. Then in if else conditions, it will check are there more words left in the line. If yes, then keep Typing else stop.
Now if the value of string.split(“”) is greater than 0, then we will find the place in the body where we need our text to come. And we accomplish it using document.getElementById(“our_div_id”).innerHTML += array.shift(); We are using the plus(+) and equal to(=) together because we are appending it together. If we used only equal to sign(=) then it would place the new word and erase the previous word. Then we will define the variable loop. In this, we will set the speed of the typing text by using setTimeout() function.
Last, but not the least, we will call our function in place so that it should start running the Animation.
Below is the code, if you need to CopyPaste.
<html>
<head>
<style>
#type {
background-color:#000;
width:700px;
height:80px;
padding:10px;
color:white;
font-family:Helvetica;
font-size:20px;
line-height:1.5em;
}
</style>
</head>
<body>
<div id=”type”></div>
<script>
var typing_text = “Coding Security – The home of effective coding tecniques.”;
var array = typing_text.split(“”);
var loop;
function start_typing() {
if(array.length > 0) {
document.getElementById(“type”).innerHTML += array.shift();
} else {
clearTimeout(loop);
return false;
}
loop = setTimeout(‘start_typing()’,70);
}
start_typing();
</script>
</body>
</html>
No comments:
Post a Comment