Thursday November 6th, 1130 – 1700. Mild for the time of year, sunny then overcast (arguably the ideal weather for it)
Having now covered excavation, identification, the recording system for trenches, finds, contexts, photographs, basic observations and interpretation, today I set about my first graphic site recordings.
Effect.Morph simply examines current CSS values and calculates new ones, iterating through a number of transforms according to the duration of the morph. Colour values are handled appropriately, but for positioning only a single value is anticipated. As the second value of background-position is never parsed, you’re limited to horizontal animation.
Note that in the example each of the observer methods sets the state directly before animating it. Mouseover begins from the original state set in the CSS while Mouseout sets the finished state (as in the CSS link hover state ) before animating back to the original state.
How it works
Very simple. Effect.Morphbgpos is a modified version of Effect.Morph that anticipates having to handle two sets of pixel values. It reads the current states into x and y variables, manipulates them and writes out the appropriate CSS, repeating until the final state is reached.
Handling Other Effect.Morph CSS properties
The extension will pass any CSS that isn’t a background-position property to a new instance of Effect.Morph.
You should be able to replace all Effect.Morph calls with Effect.Morphbgpos, and then simply find+replace them when this functionality becomes available in a future version of the framework.
This first version only handles explicit background-position statements, using pixel values, and duration is the only supported option.
As it’s only extending Script.aculo.us by a fraction it seems to be robust across the browsers I’ve tested.
Download & usage
Download the js file here (or here as text). Use just as you would Effect.Morph by settings CSS property-value pairs, and a duration.