Animation

Let's deal with the animation. All possible parameters and positions for our various layers have already been defined by the lance() function. We need to assign a coordinate to a layer and to update the coordinate in order to produce the animation. This is child's play!

49: function deplace()
50: {
51: for (i=0;i<nb_obj;i++) {
52: j = pos[i];
53: l[i].top = cy[j];
54: pos[i] += dy[i];
55: if (pos[i]>19) {
56: pos[i] = 19;
57: dy[i] = -1;
58: }
59: else if (pos[i]<1) {
60: pos[i] = 0;
61: dy[i] = 1;
62: }
63: }
64: setTimeout ("deplace()",50);
65: }

The new position of each layer is determined on line 54 by adding its current position (array pos) to its direction of movement(array dy). Since the layer position must be equal to or greater than 0 but lower than 20, we need to check it (lines 55-62) in order to invert the direction of movement and to maintain the layer's position between our limits.

Given this position and the vertical coordinate of the layer (array cy), we redisplay the layer at this new coordinate (lines 52 and 53).

All that is left to do is to call up this function indefinitely to produce our animation. The JavaScript setTimeout function undertakes this task (line 64) and calls up the deplace() function every 50 milliseconds.

In this way, each character will pass through the twenty positions in one direction, then in the other, with an offset of two positions relative to its neighbouring letters, thus producing the expected effect: a wave!

S

u

f

i

n

'

U

S

A

!