November | 2008 | code and effect

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.

See it in action on Horizontal and Vertical background animations and Vertical only.

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:

<script src="bgposeffect.js" type="text/javascript"></script>

Jonathan did a great job describing his HTML and CSS markup (including how to show the final states of the animation using CSS just in case Javascript is not present) so I won’t repeat it all here. Suffice to say this is very similar: an unordered list with an id, containing three items, containing only links.

<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:

<script type="text/javascript">
$$('#tabs a').each(
	function(s) {
		s.observe('mouseover', function(s){
			this.setStyle( {backgroundPosition: "0px 5px"});
			new Effect.Morphbgpos(this, {
			  style: 'background-position:0px -40px;color:#cc0000',
			  duration: 4.3
			});
		});
	 	s.observe('mouseout', function(s) {
			this.setStyle( {backgroundPosition: "0px -40px"});
			new Effect.Morphbgpos(this, {
			style: 'background-position:0px 5px;color:#c0c0c0',
			duration: 4.3
			});
		});
	});
</script>

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.

Limitations

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.

code and effect

@AM_Doherty

Monthly Archives: November 2008

Practical Archaeological Excavation Techniques, day six

Background Animations in Script.Aculo.Us

Practical Archaeological Excavation Techniques, day five

Practical Archaeological Excavation Techniques, day four