Add Snow Effect to your Web Page

OK, you like this snow and want to add it to your web page?  No problems, we'll snow (!!!) you how!

First, just to let you know, this snow effect works fine in the following browsers:

  • Internet Explorer 4, 5 and 6
  • Opera 6 and 7
  • Netscape 6 and 7
  • Mozilla builds up to and including 1.5 have been tested and found to work

OK, with that out of the way, here's what you do:

  1. First, you need this image:  
    Save it as 'snow.gif'.  Put this somewhere convenient (your desktop or your web working folder.
  2. Next, you need some code.  

    Copy and paste the following code into a text file (Windows Notepad will do just fine) and save it as 'snowfall.js'.
  3. Now you need to make a few changes to the web page you want to add the snow effect to. 
    In between the <body> and </body> tags (for ease do this at the top, just after the <body> tag or at the end just before the </body> tag), paste the following code into the page

  4. Now upload to your web server or web host the modified web page, the 'snow.gif' image and the 'snowfall.js' code file.  Place the image and code file in the same folder/directory as the web page with the snow effect.

  5. View your great work in your web browser!

  6. You can also make little tweaks to the code in the page, especially the three variables:
        PicX & PicY - these two variables control the size of the snowflake
        NumSnow - This controls the number of snowflakes that appear on the page
        fallRate - This variable controls how fast the snowflakes fall
        driftRate - This variable controls how much the snowflakes drift side-to-side.

Enjoy the snow effect!  Or how about autumn leaves? Pumpkins? Valentine hearts? Strawberries? Have fun with it!

Kathie Kingsley-Hughes
Last updated: May 4th 2004
Print This Page   |   Email me when this page changes    |  Search This Site System Scanner does the work for you!

udes/a_global/"); ?>

Contact Us