How to make falling snow javascript, snow falls on webpage

Java Scripts How to make snow fall on webpage.
This javascript makes falling snow on webpage. The script is easy to install and makes a great Christmas snow webpage.

Handy Tip : Using javascript code allows you to do many different things on a webpage that gives special effects and can enhance a webpages basic theme. Snow code gives a winter effect which is great around Christmas season.

Bookmark This Page | Click here for more javascripts

How to make falling snow on webpages with this snow javascript.

CLICK HERE FOR EXAMPLE

Snow can fall on your webpages by adding this free javascript code right after the <body> tag in your pages html.

STEP 1:

Copy and paste the javascript below into your html source directly below the <body> tag.

<SCRIPT 
type="text/javascript"> /*Script distributed by Hypergurl.com Visit 
http://www.hypergurl.com/easyhtml.html for this script and many more */ // This 
part preloads images. You can use different images. // Change URL path to the 
snow image below grphcs=new Array(6) Image0=new Image(); Image0.src=grphcs[0]="snow1.gif"; 
Image1=new Image(); Image1.src=grphcs[1]="snow2.gif" Image2=new Image(); 
Image2.src=grphcs[2]="snow3.gif" Image3=new Image(); Image3.src=grphcs[3]="snow4.gif" 
Image4=new Image(); Image4.src=grphcs[4]="snow5.gif" Image5=new Image(); 
Image5.src=grphcs[5]="snow6.gif" // Configure below - change number 
of snow to render Amount=15; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); 
Step=new Array(); Cstep=new Array(); ns=(document.layers)?1:0; ns6=(document.getElementById&&!document.all)?1:0; 
if (ns){ for (i = 0; i < Amount; i++){ var P=Math.floor(Math.random()*grphcs.length); 
rndPic=grphcs[P]; document.write("<LAYER NAME='sn"+i+"' LEFT=0 
TOP=0><img src="+rndPic+"></LAYER>"); } } else{ 
document.write('<div style="position:absolute;top:0px;left:0px"><div 
style="position:relative">'); for (i = 0; i < Amount; i++){ var 
P=Math.floor(Math.random()*grphcs.length); rndPic=grphcs[P]; document.write('<img 
id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">'); 
} document.write('</div></div>'); } WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight; 
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth; for 
(i=0; i < Amount; i++){ Ypos[i] = Math.round(Math.random()*WinHeight); Xpos[i] 
= Math.round(Math.random()*WinWidth); Speed[i]= Math.random()*5+3; Cstep[i]=0; 
Step[i]=Math.random()*0.1+0.05; } function fall(){ var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight; 
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth; 
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop; var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft; 
for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(90*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]); 
Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] > WinHeight){ Ypos[i]=-60; Xpos[i]=Math.round(Math.random()*WinWidth); 
Speed[i]=Math.random()*5+3; } if (ns){ document.layers['sn'+i].left=Xpos[i]; document.layers['sn'+i].top=Ypos[i]+hscrll; 
} else if (ns6){ document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]); 
document.getElementById("si"+i).style.top=Ypos[i]+hscrll; } else{ eval("document.all.si"+i).style.left=Xpos[i]; 
eval("document.all.si"+i).style.top=Ypos[i]+hscrll; } Cstep[i]+=Step[i]; 
} setTimeout('fall()',115); } window.onload=fall //--> </SCRIPT>

STEP 2:

You will need to save this graphic to your hard drive, then upload it to your server. Please do not link the graphic to Hypergurl.

To save it...right click on the image, then choose "save picture as" or "save image as". You can choose to use a different snow graphics and up to 6 different snow images. Change the snow.gif in the where we have commented within the script to the name of your new graphic.

For another falling snow javascript which doesn't need images Click Here

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name

web hosting and domain registration

NEW!
Blog for Webmasters

Website Design

Home