Dan's Layers Tutorial
2.2  Pre-Built Functions

I have created 7 special JavaScript functions to move a layer in a different manner: Circle, Spiral, Hovering, Sine Wave, Parabola, Figure-8, and Slanted Oval. Each of the functions use complicated mathematics to calculate where to move the layer. I won't bother explaining the math behind them because it would require that you take a course in advanced Geometry. But I've designed the functions so that all you have to do is set a few options and the function will do all of the mathematics for you. You can simply cut and paste the code into your pages.

For each of the examples I will be using a generic layer. It's just a red box with nothing in it. The functions will of course work no matter what you put inside the layer.

<LAYER NAME="layer1" LEFT=250 TOP=150 BGCOLOR=#FF0000 CLIP="0,0,30,30">
</LAYER>

If you need to use more than one of the same function (ie. 2 circles or 2 parabolas etc.) then you'll have to change all of the variable names in one of them. This is due to how I designed the functions - I made all the variables global. This was for ease of writing, testing, and using them. If you don't change the names the 2 functions will be using the same variables and will act very strangely because of it.

Dan's Layers Tutorial
1.1 Introduction
1.2 Overlapping
1.3 Nesting
1.4 Using JavaScript
2.1 Sliding Layers
2.2 Pre-Built Functions
2.3 Clipping Layers
2.4 Looping Animations
2.5 Changing Images
3.1 Mouse-Click Animation
3.2 Capturing Keystrokes
3.3 Drag and Drop
4.1 Making Demos
4.4 Problems
4.5 Screen Sizes


Copyright © 1997 Dan Steinman. All rights reserved.