Least Tern > Tech Class > Teacher Resources > Resources for Web Design

JavaScript: Falling Object

This script has been made available for download from The JavaScript Source

 

This script will cause a .gif file object to move around on the open window of your page. Copy the following code and paste it into the Body of your page in SimpleText or WordPad (or the .html editor in Dreamweaver or Claris Home Page). Replace the red text with your image file name. Remember that, if you place the image in your "images" folder, the path name has to begin with "images/....".

This will work for transparent images and even for .gif animations. There are some .gif animations in the Content folder inside the Claris HomePage folder, or you can create your own with an animation program such as GifBuilder. Copy them (option-drag) into your web page folder. To make an image transparent you will need to work in either Adobe Photoshop/Photoshop Elements, Claris HomePage, Gif Builder, or Word. All of these programs can apply transparency to an object. Here are some objects you can download to try:

(72 x 79) (40 x 40 - use on #000000 background) (10 x 11)

Copy this code and paste it into the Body of your page (in the .html view or in SimpleText. Change the red content to the name of your graphic file. Change the blue content to the size of your graphic file. You can find out the size by putting the graphic into Photoshop Elements or AppleWorks Draw (72 pixels=1 inch).

<SCRIPT language="JavaScript1.2">
/*
Floating Spirit
*/
var cursorpath;
if(Math.random() > 0.5)
{
cursorpath="bee.gif";
}
else
{
cursorpath="bee.gif";
}
if (document.layers)
{document.write("<LAYER NAME='PoInTeRs' LEFT=10 TOP=10><img src='"+cursorpath+"' width=115 height=137></LAYER>")}
else if (document.all){document.write("<div id='pOiNtErS' style='position:absolute;top:10px;left:10px;width:72px;height:79px;z-index:50'><img src='"+cursorpath+"' width=72 height=79></div>")}
count=-1;
move=1;
function Curve(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
howbend=abc[C];
setTimeout('Curve()',1900);
return howbend;
}
ypos=10;
xpos=10;
degree = 60;
function MoveRandom(){
PathBend=degree+=howbend;//ok!
y = 4*Math.sin(PathBend*Math.PI/180);
x = 6*Math.cos(PathBend*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.PoInTeRs.top=ypos+window.pageYOffset;
document.PoInTeRs.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.pOiNtErS.style.top=ypos+document.body.scrollTop;
document.all.pOiNtErS.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('MoveRandom()',50);
}
function edges(){
if (document.layers){
if (document.PoInTeRs.left >= window.innerWidth-40+window.pageXOffset)degree=Math.round(Math.random()*45+157.5);
if (document.PoInTeRs.top >= window.innerHeight-30+window.pageYOffset)degree=Math.round(Math.random()*45-112.5);
if (document.PoInTeRs.top <= 2+window.pageYOffset) degree = Math.round(Math.random()*45+67.5);//OK!
if (document.PoInTeRs.left <= 2+window.pageXOffset) degree = Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.pOiNtErS.style.pixelLeft >= document.body.offsetWidth-45+document.body.scrollLeft)degree=Math.round(Math.random()*45+157.5);
if (document.all.pOiNtErS.style.pixelTop >= document.body.offsetHeight-35+document.body.scrollTop)degree=Math.round(Math.random()*45-112.5);
if (document.all.pOiNtErS.style.pixelTop <= 2+document.body.scrollTop) degree = Math.round(Math.random()*45+67.5);//OK!
if (document.all.pOiNtErS.style.pixelLeft <= 2+document.body.scrollLeft) degree = Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}
function starteffect(){
Curve();
MoveRandom();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
window.onload=starteffect
</script>

Elizabeth Sky-McIlvain 11/17/02