Glide Methods

The Glide methods are almost the same as the Slide Methods except they use a different formula for moving the layer. The Slide methods are simple straight-line animations, whereas the Glide methods use trigonometric math to create a subtle acceleration or deceleration effect. The result is some very slick looking animations.

As with the Wipe methods, I've made the Glide library a separate javascript file, dynlayer-glide.js. You must call include this file in any code that uses the glide methods:

<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer-glide.js"></SCRIPT>

The glideTo() Method:

Glides the layer to a specific co-ordinate. The parameters are almost the same as in the slideTo() method:


The angleinc parameter is probably the only one which isn't obvious. The glide methods use a Sine wave as the basis for the acceleration, and the angleinc simply determines how many degrees to jump each time. The bigger the angleinc, the bigger the jumps it will make. So it is similar to the inc value in the Slide methods - usually a value from 5 to 10 is good to use.

Example: glides to (50,50), starting slow, ending slow, at 10 degrees, and 20 milliseconds per interval.


The glideBy() Method:

Same as all the others, glideBy() shifts the location by a given number of coordinates:


Where distx and disty, are now the amount it will shift by.

Glide Methods Demo:

Example: glide1.html [source]

Source Code


DynLayer Extensions:

Home Next Lesson: Geometric Objects
copyright 1998 Dan Steinman