Every year the preparations for Christmas start earlier and earlier:
- advent calendars are on sale in September
- Santa is stood in many shops well before Halloween
- snow is painted on shop fronts long in advance of any of the real stuff
Therefore, of course, it is essential that all web sites should be able to do the same - and a nice decoration for any web site is some seasonal snowflakes.
Any web site designers have two options, they can:
- add static images of snowflakes to a web page
- add static images of snowflakes to a web page and then animate them with Javascript.
In either case the first step is to create an image of a snowflake.
Creating Snowflakes for a Web Page
One of the most beautiful sights is a snowflake and, although they look complex, their geometry is actually very simple - a recognisable snowflake can be created by using an icon editor such as KIconEdit to:
- create an icon 36x36 pixels
- draw 3 intersecting, equal length lines - these need to drawn drawn so that they look like the spokes of a bicycle
- draw a few smaller branches off the main arms
The icon then needs to saved onto the web server as (for example) snowflake.png.
Creating a Static Display
There are a few things to bear in mind when adding static snowflakes to a web page:
- snowflakes are white - and so are many web pages; therefore the snowflake needs to be highlighted in some way
- the snowflakes will need to be distributed unevenly all over the web page
- the snowflakes must not interfere with the real content of the web page
Fortunately this can all be achieved by using standard HTML:
- the style properties position:absolute, left and top fix an object to a set location on a web page
- the style property z-index defines whether any object overlays another (default is 0 with higher numbers overlaying and lower numbers underlying)
- the width and height properties can be used to make the snowflakes smaller or larger
The HTML code for a web page with static snowflakes will be something like the following.
Creating an Animated Display
The animated snow scene is basically the same as the static one - the web page consists of its normal contents:
However, the position of the snowflakes will be controlled by Javascript code.
In the static example a number of snowflakes were added manually and their size set individually - Javascript will do all of that with code and so the programmer must start by defining how many snowflakes are to be shown and how big (in pixels) they will be by default:
A simple Javascript loop will add all of the images required by the page (giving each a unique ID as it does so):
Since the code to move the snowflakes will be used a lot the most sensible thing to do is to encapsulate it in a function:
The function updates the style.top property with the value that's been fed to it:
and then increases the input value by 1 pixel (which actually means one pixel further down the page - positon 0,0 is in the top left corner of the screen):
When snowflake reaches the bottom of the page then the function will move it back to the top, but will now choose a new random left value (so that it doesn't just start from the same position each time):
The function will also choose a new random size for the snowflake:
A new speed of descent will now be calculated - this will be related to the size so that smaller snowflakes will fall more slowly (to give a 3-D effect):
The snowflake's properties can now be updated:
And finally the setTimeout method is used to add a timer - this sets when the position of the snowflake is to be updated again:
The final step of the whole process is to set the snowflakes into motion:
Conclusion
The end result is a simple yet effective Christmas decoration for any web site - achieved with just a single image and a little bit of Javascript code.
Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...
