Web Tutorial: A Christmas Animation (Part 4/4)

The animation's more or less there. We're going to do some tidying up.

What do most good animations have? A Replay feature! So take another look at your HTML. Fill in whatever message you like in the text_wrapper div. The txtReplay div is meant as a placeholder for your Replay button text.

What's really important here is the Replay feature. To facilitate that, let's create a reset() function in the JavaScript like so.

            function reset()
            {
                var houses=document.getElementsByClassName("house");

                for (var i=0;i<houses.length;i++)
                {
                    houses[i].style.marginTop="400px";
                }

                document.getElementById("spinleft").innerHTML="";
                document.getElementById("spinright").innerHTML="";

                document.getElementById("txtReplay").innerHTML="(please wait...)";
                setTimeout(function() {play();},4000);
            }

            function play()
            {
                snowflakes(100);
                raisehouses();
            }

This basically resets the margin-top property of all the building blocks back to 400px, then clears the spinright and spinleft divs of all snowflakes. (Santa remains untouched. I'm a lazy bastard that way.) Then the txtReplay div is filled with the words "(please wait...)" while a timer function triggers the play() function.

And the play() function, of course, begins the animation! Of course, we need to add a new line here...

            function play()
            {
                snowflakes(100);
                raisehouses();
                document.getElementById("txtReplay").innerHTML="(click to replay)";
            }

So the text changes to "(click here to replay)" once the animation starts running.

We're done here!

Check out the results. The jolly old dude ho-ho-hoing his way across the landscape of buildings and snow. Try the replay button. Does it all go back to the beginning?

Wishing you a very HO-HO-HO-ly Christmas,
T___T