//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:

var slumber = 25;
var max_size = 36;
//A simple Javascript loop will add all of the images required by the page (giving each a unique ID as it does so):

for (var s = 1; s < slumber; s++ ) {
document.write (
"<img id=snowflake" +
s +
" src=snowflake.png style=position:absolute>"
);
}
//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:

function move_snowflake
(snowflake_id, top, left, speed, size, max_size) {
var snowflake = document.getElementById(snowflake_id);
//The function updates the style.top property with the value that's been fed to it:

snowflake.style.top = top;
//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):

var top = top + 1;
//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):

if (top > document.body.clientHeight - 36) {
top = 0;
var rand_no = Math.random();
rand_no = rand_no * 100;
var left = document.body.clientWidth * rand_no / 100;
//The function will also choose a new random size for the snowflake:

rand_no = Math.random();
var size = max_size * parseInt( rand_no * 100 ) / 100;
//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):

var speed = 150 * (100 - parseInt( rand_no * 100 )) / 100;
}
//The snowflake's properties can now be updated:

snowflake.style.left = left;
snowflake.width = size;
snowflake.height = size;
//And finally the setTimeout method is used to add a timer - this sets when the position of the snowflake is to be updated again:

setTimeout (
'move_snowflake("'
+ snowflake_id + '",'
+ top + ',' + left + ','
+ speed + ',' + size + ',' + max_size + ')'
, speed );
}
//The final step of the whole process is to set the snowflakes into motion:

for (var s = 1; s < slumber; s++ ) {
move_snowflake(
"snowflake" + s,
document.body.clientHeight,
0, s*100, max_size, max_size
);
}