Stupid Web Tricks: Add seasonal panache to your Web page

by Guest Contributor | Oct 02, 2003 8:43:00 PM

Takeaway: Create snowy visions with this falling-snow Web trick. You can customize this script to match the season or your mood.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham
(2/9/01)

Editor's note: On Jaunary 18, 2001, a statewide power crisis blacked out CNET Builder.com's San Francisco offices, and the staff was sent home. Since that's as close as coastal Californians ever come to a snow day, we're commemorating the event with this special Stupid Web Trick.

What a great place the Internet is, letting you indulge winter wonderland fantasies while basking in the warm glow of your monitor. All you need to add some seasonal panache to your Web page is a handy little script that creates snowy visions evocative of the great names: Thoreau, Frost, London, and...Altan, the original creator of the falling-snow script. Our version is easy to customize and supports newer browsers and page scrolling.

Step one: Copy and paste this JavaScript code into the <BODY> of your Web page (a good place is right before the closing </BODY> tag). Click here.

Step two: Decide what kind of snowflake lover you are. Plates? Dendrites? Plate-dendrites? Find or create a snowflake image and save it as snow.gif in the same directory as your page. Or maybe you're yearning for something more than snow? You can always go a little seasonally crazy and substitute in an image of anything that you'd like to see falling from the sky: flowers, leaves, benjamins, or heads of election officials dropping gently towards bamboo spikes.

Step three: Fine-tune the snowfall by modifying the first three lines of the script:

var snowflake = "snow.gif"; var no = 9; // number of snowflakes on the screen var speed = 12; // smaller numbers make the snow fall faster

Change snowflake to use an image name other than snow.gif, or substitute a complete URL if the image must sit in a separate directory. Adjust no to change the number of snowflakes; large menacing ones are more effective in smaller numbers. Finally, speed is the delay between snow movements, so increase or decrease this number to slow down or speed up the snowfall.

Diversify: If you're into high stimulation, you can have a flurry of images instead of identical snowflakes. Replace the first two lines above with:

var snowflake = new Array(); snowflake[0]="snow.gif"; snowflake[1]="snow1.gif"; snowflake[2]="snow2.gif"; var no = snowflake.length;

containing as many snowflake[ ] iterations as you want. Now go to the line:

document.write(snowflake + "\" border=\"0\"></div>");

and change snowflake to snowflake[i]. If all of your images are in place as indicated, you should get heterogeneous snow.

Reverse gravity: To appropriately reward those optimists who have read this far, you can make your snowflakes float upward like champagne bubbles by implementing yet another script tweak. In the function snow(), replace the lines:

yp[i] += sty[i]; if (yp[i] > doc_height+doc_scroll-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_scroll;

with:

yp[i] -= sty[i]; if (yp[i] < doc_scroll-40) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height+doc_scroll;

and you will exalt your page with a gravity-defying technique seldom seen outside of the better plastic surgeons' offices on Rodeo Drive. Your longer attention span has paid off again.

There you have it. Congratulate yourself if the only real iciness you are forced to contend with is a slushy.

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

2 comment(s)