Ever been to a site with Page Drifters ? Pretty darn cool huh? Some sites have snow-drifters, flowers, stars, or confetti but the possibilities are only limited by the boundaries of the imagination. First thing you will need is a GIF, so that the image edges are smooth and transparent. Then you need some code. 

This code is for an array of six related images, which when the code is executed seemingly float down a web page like gently falling snow. The effect is impressive. Just copy and paste the code into the BODY of your web page.  You can change the images contained in the code (al.gif, bl.gif, cl.gif, dl.gif, el.gif, & fl.gif)to the image name of your file. You can also adjust the number of images by removing a line of code or adding (and renumbering) a line of code.  Amount=6; is the number to adjust if you whish to see more of the same images. Add a few more lines of code such as Image6=new Image(); Image6.src=grphcs[6]="gl.gif" and increase the number of different images available.

<script language="JavaScript1.2"> //Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net) //Modified by Dynamic Drive for NS6 functionality //visit http://www.dynamicdrive.com for this script //Pre-load your image below! grphcs=new Array(6) Image0=new Image(); Image0.src=grphcs[0]="al.gif"; Image1=new Image(); Image1.src=grphcs[1]="bl.gif" Image2=new Image(); Image2.src=grphcs[2]="cl.gif" Image3=new Image(); Image3.src=grphcs[3]="dl.gif" Image4=new Image(); Image4.src=grphcs[4]="el.gif" Image5=new Image(); Image5.src=grphcs[5]="fl.gif" Amount=6; //Smoothness depends on image file size, the smaller the size the more you can use! 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="/images/drifters/autumn/+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="/images/drifters/autumn/'+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>

Download any of the following Page Drifter graphic zip sets for use with the Page Drifter Java Script FIX HTML code provided in the text box found above.

autumn.zip     butterflys.zip     halloween.zip
hearts.zip     smileytime.zip     springtime.zip
stpatricks.zip     stvalentines.zip     xmas.zip

nhyrvana's snow set

using Geo PAGE BUILDER ?   Take Notice.

• How to insert the page drifter script into the BODY: 

• 1st you MUST upload the image files to your File Manager.

• Next, in the Page Builder select "Insert" / "Forms and Scripts" and next click on HTML Codes.

• Where it says "Description" just type in a name such as "Page Drifter Java Script".

• Where it says "Script" copy and paste the page drifter java script code exactly as it is shown here above. 

• Click "OK".