Maa Web

Falling Snow

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

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 Maagraphics.com Visit http://www.maagraphics.com 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 Maagraphics.

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.

Snow. Gif

Ready-made Photoshop Templates

Maa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>