Snow Fall - with multiple images drifter snow flakes falling

Snow Fall - with multiple images

This snow fall script allows images to seemingly float down a web page like gently falling snowflakes.
The script used on this page is running five different images, but can be configured to use less or more.
You could also use other images such as hearts, leaves, flowers, stars, or confetti but the possibilities are only limited by your imagination.

Example of :
Count Down Script



See also: Count Down No image Snow Fall
No image Snow Fall 2 Float Down
Float Up Hearts Fall Scripts.
Browser Compatibility: FF - IE - NN - O

Here are some other snow images you could use.
Be sure to copy them and load them into the same directory as your HTML page.
Or you can upload your own images to use in the same way!

Follow the editing instructions after the // and within the 
to customize the script, then copy and paste it into your HTML editor.

<SCRIPT type="text/javascript">
/*
Snow Fall Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/
 
//Pre-loads your image/s below
//Configure below - change URL path to the snow image

grphcs=new Array(5)
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"

//Smoothness depends on image file size, 
//the smaller the size the more you can use!

// 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>
<p><font face="arial" size="-2">Free JavaScript from </font><br><font face="arial, helvetica" size="-2"><a href="http://rainbow.arch.scriptmania.com/scripts/">Rainbow Arch</a></font></p>