var ani = sstchur.web.Animation;
var obj1 = document.getElementById('obj1');
var roller = new ani.Roller(obj1);
roller.LeaveAmount = 20;
roller.AccFunction = AccelerationFunctions.CrazyElevator;
var asso1 = document.getElementById('asso1');
var asso2 = document.getElementById('asso2');
roller.associate(new Array(asso1, asso2));
roller.onafterrollin = function() { alert('done rolling'); };
roller.rollIn(ani.RollDirection.BottomUp);
// or: roller.rollOut(ani.RollDirection.TopDown);
// or: roller.rollIn(ani.RollDirection.RightLeft);
// you get the idea
Notes:
This example has been programmed to not allow the roller
to roll in if it is currently collapsed or to roll out
if it is currently expanded.
LeaveAmount: the amount of object to leave behind when
rolling in (not applicable to roll out). This is specified
in pixels (but could be modified to work with ems or
something like that).
Associate: associates an array of objects with the roller.
Those objects will "tag along for the ride" when the roller
rolls in or out. This works based on where the associated
objects currently ARE, so you can yield funny results if
you repeatedly roll in one direction
without ever roll back the other direction.
Direction: self explanatory (at least I think it is)
Acceleration Fn: also known as "easing" (but I prefer
acceleration function). The functions listed on this
page are stock functions I wrote, but you can easily
write your own as well. The Roller exposes an
AccFunction property that expect an object of type
sstchur.web.Animation.AccelerationFunction (see
slider page
for an example of a custom function).
Events: The Roller object exposes a number of events,
such as onbeforerollin, onafterrollin, onbeforerollout,
onafterrollout, and onroll.
onafterrollin has been setup as an example on this page.