Inspired by Jonathan Snook’s article on animating backgrounds using Jquery, I had a snoop around in Script.aculo.us for the equivalent methods to create moving background images. It wasn’t long before I hit a wall with the Effect.Morph method and its inability to parse the CSS values for background-position.
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.
see a demo of the problem.
So I’ve created an extension, similar to Alexander Farkas’ for JQuery, to manipulate background-position both vertically and horizontally using the same syntax as Effect.Morph.
Using the Effect.Morphbgpos extension
Include in the <head> the Prototype and Script.aculo.us libraries as usual. Download the extension and include it after the main libraries:
<body> ... <ul id="a"> <li><a href="#">Rivera</a></li> <li><a href="#">Miro</a></li> <li><a href="#">Varo</a></li> </ul> ...
Then (somewhere after the list) include the code observers that restyle your links on mouseover and mouseout:
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
Stumble it! | save this entry to del.icio.us