The Rambling Tutor: Falling Flowers adaptation demo

Unofficial Tips and Tutorials for Homestead SiteBuilder™ Users

Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact

Falling Flowers Adapted from Kurt Griggs' Autumn Leaves Script >>>

I've taken Kurt's script, which uses autumn leaves and substituted them for flowers which I got from CoolArchive.com (note: link removed due to negative rating from McAfee SiteAdvisor). The flowers were a little large, so I used their link to edit the flowers at MyImager.com. I resized each flower to 50% and saved the flowers to my hard drive before uploading them to this site's files directory. This flower script adaptation would be super for a spring celebration page, a wedding page, or a little girl's page.

When saving the images from MyImager, you need to delete the large number, which is their file number, and add .gif to the name before pressing the Save button. For example, one of the flowers is called nature010. MyImager added numbers after the name: nature010.6549393858939.gif. I deleted the file numbers and added gif to make sure the file was saved as a gif in my hard drive.

You can have as many images as you want as long as the file sizes are small. Just adjust the Array number and ImageX lines. Make sure you change the flower names to what your images are called. Here's the script with flowers. Every variable you can change is highlighted in red type. Enter the script into the Insert HTML element, resize as small as possible, and place in the top left corner of your page. Be sure to upload the images!

Special! If you like the flowers in this demo, you're welcome to grab them. Right-click or hover and click to save to your own hard drive. Be sure to credit CoolArchive.com for the flowers. These look best on a light-colored page.

Another variation which I used to have on the main page uses cookies. Check it out here.

If you have any problems using this script on your SiteBuilder page, then you may have to use a workaround. This comes from Stan Bisson and is used on many of the scripts I demo on this site which require an "onload" event handler. Copy-and-paste the following code into another Insert HTML element, resize, and place in the top left corner of your page.

//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(3)
Image0=new Image();
Image0.src=grphcs[0]="files/nature008.gif";
Image1=new Image();
Image1.src=grphcs[1]="files/nature010.gif";
Image2=new Image();
Image2.src=grphcs[2]="files/nature011.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

Plus 260 visitors before joining Site Meter on June 11, 2001