This script is a modification of the Snow Effect script written by Stephen Chapman (About.com:Focus on Javascript). While the focus of his script and article is about falling snow flakes, it is adaptable to any image you want to flutter down your page.
(snow.zip)After downloading and unzipping the snow.js script file, you will need to upload it to your site. Then in SiteSpinner, use a custom header and enter the following in a custom header:
// User defined parameters
var upd_speed = 50;
var num_flakes = 10
var snowflakes = new Array(
"image1.gif",
"image2.png",
"image3.png");
</script>
// Include script file
<script src="snow.js" type="text/javascript"></script>
Adjust the script parameters as desired. The following table explains how the parameters are used in the script.
| upd_speed | Controls how often the images are updated (moved) on the screen; time is in milliseconds. |
| num_flakes | Specifies how many images will be displayed on the page. |
| snowflakes | A comma separated list of image file names. Images displayed on the page are randomly selected from this list as many times as need to create the desired number of snowflakes. The list can be expanded by adding additional filenames (just ensure filenames are separated by commas). |
You will also need to upload the images to your site. If you upload them to a folder other than the root (such as the SiteSpinner /image folder), make sure the script image filenames include the path information. The external file reference shown in the custom header assumes the snow.js script has been placed in the root directory/folder of your site. If you uploaded it to a different folder, make sure you alter the src="…" attribute to include the folder’s path.
Once the custom header is complete, you then need to enter the following code into a Code object to start the image displays on your page. This code must be positioned as the last code script on your page. You can use the Front positioning button 
to place the Code object before the page’s closing </body> tag. Or you may use the special geometry name of BELOWBODY. This will place the script after the closing body tag and works with modern browsers.
startSnow();
</script>
The demo page contains a sample of various images obtained from the web and is available for download using the link below. The zip file also contains a dingbat font from P22 Type Foundry, Inc. containing snowflake images that can be used to make your own images via the SiteSpinner Title Editor or other image processing program.
(snowfakes.zip)
A Note About Images
Images should be limited to icon sizes (16×16, 24×24, or 32×32) for the best visual effect. While larger sized images are possible, they just do not look right.
Since the number of displayed images is randomly selected from the list of images, if the file list contains twice the num_flakes value, you will get a good mix of images on your page. This also assures that if your visitor refreshes their page, the newly displayed images will vary from the previous set.
If you are the type who likes seasonal page displays, you can easily swap out the image files for new ones without republishing your project.
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites
Thanks for the quick response. This is a little bit over my head and I would like to make sure I do this right.
I will upload the following snowflakes .png image files to my web host root server:
- Snowflakes top level folder name = flakes
- Contained in the “flakes” top level folder are three folders each containing the flakes in their respective colors
- Folder “blue” containing the blue flakes
- Folder “red” containing the red flakes
- Folder “green” containing the green flakes
The snowflake images in these respective folders are named “snow0”, “snow1”, “snow2”, etc
Note: these are the snowflake files I downloaded from the Virtual mechanic site)
Just to make sure I do this right, here is my modified custom header file script to handle above file structure:
// User defined parameters
var upd_speed = 50;
var num_flakes = 10
var snowflakes = new Array(
“./flakes/blue/snow0.gif”,
“./flakes/blue/snow1.png”,
“./flakes/blue/snow2.png”);
“./flakes/red/snow0.gif”,
“./flakes/red/snow1.png”,
“./flakes/red/snow2.png”);
“./flakes/green/snow0.gif”,
“./flakes/green/snow1.png”,
“./flakes/green/snow2.png”);
// Include script file
Is this correct?
Thanks for your help.
Franz
The file structure you want to use is up to you. The script will look for the flakes in the location/path specified by the:
var snowflakes = new Array(
“image1.gif”,
“image2.png”,
“image3.png”);
part of the script (above) included in your custom header. If the snow.js script is located your site’s root folder, and the images are in [root]/flakes/blue, then the code would be:
var snowflakes = new Array(
“./flakes/blue/image1.gif”,
“./flakes/blue/image2.png”,
“./flakes/blue/image3.png”);
where imageX.png is the actual image file name you want to use.
The snow flakes generated by the java script look very pretty. I have one quick question about getting the script running on my site:
When I downloaded and unzipped the actual flake .png images they are organized in folders. Root folder = “flakes” and subfolders “black”, “blue”, “green”, etc.
Do I upload these .png flake images in their original folder structure to my by hosting root server?
Thanks for your help.
Franz