Roll your own script.aculo.us effect
Scriptaculous Javascript library comes with a nice set of effects; if they're not enough, roll your own.
Start by copying an existing effect that's close to what you want, copy it to separate file and rename it:
Look in the effects.js file distributed with the Scriptaculous library. I've taken the Effect.Move.
// orbit_effect.js
Effect.Orbit = Class.create(Effect.Base, {
...The heart of a Scriptaculous effect is the "update" function:
It takes a "position" parameter which is a number between 0 and 1 and conveys how far along the timeline has the effect advanced.
...
update: function(position) {
var k = 20;
var rounds = 2;
if (position<0.2)
k *= position*5;
if (position>0.8)
k *= (1-position)*5;
this.element.setStyle({
left: (k * Math.sin((1-position)*Math.PI*2*rounds) + this.originalLeft).round() + 'px',
top: (k * Math.cos(position*Math.PI*2*rounds) + this.originalTop ).round() + 'px'
});
}
...Need setting something up? Do that in the "setup" function:
...
setup: function() {
this.element.makePositioned();
this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
this.originalTop = parseFloat(this.element.getStyle('top') || '0');
}
...You can pass parameters to a Scriptaculous effects. Use the "initialize" function to process them:
I'm going for a quick'n'dirty look, so barebones is good enought for me.
...
initialize: function(element) {
this.element = $(element);
this.start(arguments[1]);
}
...
Download the files used in this demo (.zip).