How to animate your web pages using JavaScript, HTML and CSS: A tutorial
One of the great benefits to using JavaScript is the fact that it allows you to animate your web pages in simple yet creative ways. Here we look at a simple example that animates the result of a game or rock-paper-scissors.
JavaScript gives you the ability to add a new dimension to static HTML pages. By combining a bit of conditional logic with some CSS and HTML, you can create a variety of neat effects. In this example, we build on the rock-paper-scissors (Roshambo) application created in the previous example, with the big difference being that when we tell a person they have won, lost or tied, the text slowly slides down the screen, while simultaneously fading away.
We need to leverage the div tag and some cascading style sheets (CSS) to make this work. First, we create four div block, one to display the selections on which a user to click, and then three more, each one wrapping up words describing the results of a single game play.
<body >
<div id="playblock">
<a href="#" onclick="playRoshambo('rock')">rock</a> <a href="#" onclick="playRoshambo('paper')">paper</a> <a href="#" onclick="playRoshambo('scissors')">scissors</a>
</div>
<div id="winblock">YOU WIN!!!</div>
<div id="loseblock">YOU LOSE!!!</div>
<div id="tieblock">YOU TIE!!!</div>
</body>
Notice the id values of each div: playblock, winblock, loseblock and tieblock. The positioning of these block elements get determined by the CSS style entry placed within the HTML head element.
<style>
div#playblock {
left:10px;
top:25px;
position:absolute;
}
#winblock, #loseblock, #tieblock {
left:10px;
top:50px;
color:rgb(255,255,255);
position:absolute;
}
</style>
The links get positioned 10 pixels from the left, and 25 pixels from the top corner of the page. The various pieces of text that display the results are all stacked on top of each other, 25 pixels below the links. Don't worry though, as the results are all set to white, which matches the color of the background, making them all invisible. When the page initially loads, all the user sees is the three links they can click on: rock, paper and scissors.
In our JavaScript, we declare four variables:
var numberOfFrames; //the number of frames in the animation
var colorValue; //the number to use for the RGB values
var topValue; //the pixel number at which to display the result text
var element; //which element, win, lose or tie, on which to perform the animation
When the user clicks on a link, the playRoshambo method is invoked. The method looks very similar to the previous iteration, with the exception of the fact that instead of popping up an alert to indicate the result, we set the active element to the appropriate div, be it winblock, loseblock or tieblock. Once the assignment is made, the dropAndFade() method is invoked. You will also notice that all of the variables are reset to their initial values as the playRoshambo method is entered.
playRoshambo = function(clientGesture){ numberOfFrames = 12;
colorValue = 0; topValue = 50;
//server always chooses rock
if (clientGesture=='rock') {
element = document.getElementById('tieblock');
}
if (clientGesture=='paper') {
element = document.getElementById('winblock');
}
if (clientGesture=='scissors') {
element = document.getElementById('loseblock');
}
dropAndFade();
}
The dropAndFade method does two things. First, it pushes the text being displayed down the page 25 pixels at a time. Secondly, it increases each element of the RGB color system 20 units at a time. The RGB unit is reset to 0 at the start of the playRoshambo method, and since RGB(0,0,0) is black, the text first gets displayed clearly. As each element in the RGB code gets increased 25 units at a time, the text, as it moves down the screen, fades to grey, and eventually to white, making it essentially disappear.
To call itself recursively, the setTimeout method is used, forcing the method to keep calling itself every fifth of a second, or 200ms. Finally, when the loop has run a number of times equaling the numberOfFrames variable, the animation stops.
function dropAndFade() {
if(numberOfFrames > 0) {
topValue = topValue + 25;
element.style.top = topValue + "px";
colorValue = colorValue + 20 ;
element.style.color = "rgb("+colorValue+","+colorValue+","+colorValue+")";
numberOfFrames--;
setTimeout("dropAndFade()", 200);
}
}
Looking at the code in its entirety helps bring all of the various concepts together:
<html>
<head>
<style>
div#playblock {
left:10px; top:25px; position:absolute;
}
#winblock, #loseblock, #tieblock {
left:10px; top:50px; position:absolute;
color:rgb(255,255,255);
}
</style>
<script>
var numberOfFrames;
var colorValue;
var topValue;
var element;
function dropAndFade() {
if(numberOfFrames > 0) {
topValue = topValue + 25;
element.style.top = topValue + "px";
colorValue = colorValue + 20 ;
element.style.color = "rgb("+colorValue+","+colorValue+","+colorValue+")";
numberOfFrames--;
setTimeout("dropAndFade()", 200);
}
}
playRoshambo = function(clientGesture){
numberOfFrames = 12;
colorValue = 0;
topValue = 50;
//server always chooses rock
if (clientGesture=='rock') {
element = document.getElementById('tieblock');
}
if (clientGesture=='paper') {
element = document.getElementById('winblock');
}
if (clientGesture=='scissors') {
element = document.getElementById('loseblock');
}
dropAndFade();
}
</script>
</head>
<body >
<div id="playblock">
<a href="#" onclick="playRoshambo('rock')">rock</a>
<a href="#" onclick="playRoshambo('paper')">paper</a>
<a href="#" onclick="playRoshambo('scissors')">scissors</a>
</div>
<div id="winblock">YOU WIN!!!</div>
<div id="loseblock">YOU LOSE!!!</div>
<div id="tieblock">YOU TIE!!!</div>
</body>
</html>
