|
|
|
||||||
|
Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact |
|||||||
|
RT Snowflake Adaptation of Kurt Griggs' Autumn Leaves Script from Dynamic Drive >>> It's funny how one script from an author could work in Mozilla Firefox and another script from the same author not work in Firefox even if it looks similar in coding. Since I primarily use Firefox nowadays and am bothered when scripts don't work in a popular browser (meaning non-IE, non-Netscape) and have noticed a lot of my visitors seeking snow scripts, I'm offering this adaptation using five snowflakes created at Make-A-Flake (requires Flash 7) by me and others and tweaked with Paint Shop Pro 7 to use here. You can see the original script by Kurt Grigg at Dynamic Drive by clicking the link on the page title above. It's the same script that I've adapted for use with SiteBuilder and show with flowers and cookies. Download these snowflakes to your hard drive to upload or FTP later to your Files directory. Because of the light color of these flakes, it's best used on a dark-colored page. If you prefer to make your own, go to Make-A-Flake and then use your favorite graphics program to edit the snowflakes. Or you can use the light bluish snowflakes offered with Kurt Griggs' Snow Image script.
Then copy-and-paste the script to the right that's been changed to use with SiteBuilder into an Insert HTML element and place the element in the top left corner of the page without overlapping other elements. If you have any problems with not seeing the snowflakes on your page, you might have to use Stan Bisson's workaround as shown below: Put that piece into the same element as the script but before the script itself and make sure there's an empty line. <img src="/tp.gif" width="1" height="1" onload=fall> Alternately, you can use less than five snowflakes or just one. You will need to change the number in the new Array() field and delete the required number of lines of images. The less images you use, the higher the number you can use in the Amount= field. See the script in action on this page, if you can't see it here! BTW, I made the middle three snowflakes above and other creative types made the ones on the ends. You are free to view and download snowflakes from the Gallery at Make-A-Flake. |
<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(5) Image0=new Image(); Image0.src=grphcs[0]=" files/sflake1.gif"; Image1=new Image(); Image1.src=grphcs[1]="files/sflake2.gif" Image2=new Image(); Image2.src=grphcs[2]="files/sflake3.gif" Image3=new Image(); Image3.src=grphcs[3]="files/sflake4.gif" Image4=new Image(); Image4.src=grphcs[4]="files/sflake5.gif" Amount=8; //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="+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()',20); } window.onload=fall //--> </script>
|
||||||
| Formerly hosted at www.geocities.com/ramblingtutor/ |
Home - Tips & Tutorials - JavaScript Demos - Java Demos - Resources - Contact Webpage graphics by Arride Graphics
|
||||||
