I promise this is something you haven’t seen with Mootools yet, maybe not even JavaScript. My goal was to emulate an effect that you can see over at alician blue. Notice how the blue slides in when you hover over the navigation links. That’s pretty simple, right? Mimicking with Mootools was actually pretty simple too.

First we start off with a standard navigation list:

These aren't images!
And they aren't made with flash!
It's all dynamic javascript!

Here’s the CSS:

#nav {
  margin:1em;
  list-style:none;
}
#nav a {
  font-size:24px;
  font-weight:bold;
  color:#f60;
  text-decoration:none;
}
#nav a span.hover {
  color:#06f;
  position:absolute;
  cursor:pointer;
}

Rather than styling the :hover state of the link, we style a span class, ‘hover’ in this case. It needs to be absolutely positioned because it’s going to be placed on top of the original link. We’ll also set the cursor to pointer for good measure.

Now we have two choices: (1) Just wrap the span in a div and adjust the width of that, or (2) use the clip property. At first, I chose number one, but the effect only slides from left to right, which would achieve the desired result, but why stop there when I can do more? So two it is. Using the clip property will allow us to start the slide from the middle outwards. But there’s a problem. Mootools effects don’t support the clip syntax which looks something like this: clip: rect(20, 100, 100, 20). For more info on using the clip property, try this thumbnail tutorial. Luckily, while searching the Mootools forums, I came across Fx.CSS.Clip. Here’s how I implemented it:

Fx.CSS.select = function(property, to){
  if (property.test(/color/i)) return this.Color;
  if (property.test(/^clip$/i)) return this.Clip;	// this is the line that needs to be added
  var type = $type(to);
  if ((type == 'array') || (type == 'string' && to.contains(' '))) return this.Multi;
  return this.Single;
};

Fx.CSS.Clip = {
  parse: function(value){
    if (value.push) return value;
    var res = value.match(/rect\((\d+)px[,]?[ ]+(\d+)px[,]?[ ]+(\d+)px[,]?[ ]+(\d+)px\)/i);
    if (!res) return [0,100,100,0]; // Anything to give the developer feedback something's wrong
    return [parseInt(res[1]), parseInt(res[2]), parseInt(res[3]), parseInt(res[4])];
  },

  getNow: function(from, to, fx){
    var now = [];
    for (var i = 0; i < from.length; i++) now[i] = Math.round(fx.compute(from[i], to[i]));
    return now;
  },

  getValue: function(value){
    var ret = [];
    for (var i=0; i 0) ret += " ";
      ret += value[i] + "px";
    }
    return 'rect(' + ret + ')';
  }
};

In order for this to work, the creator actually modified the Mootools function Fx.CSS.select. I simply overwrote it in this case because I’d rather not hack the library. Now that we can animate the clip propterty, let’s get started.

window.addEvent('load', function () {
  $$('#nav a').each( function (el) {
    var height = el.offsetHeight;
    var width = el.offsetWidth;
    var mid = Math.round(width / 2)
    var hover = new Element('span', {
      'class':'hover',
      'styles': {
      	'top': el.getTop(),
      	'left': el.getLeft(),
      	'clip': 'rect(0px '+ mid +'px '+ height +'px '+ mid +'px)'
      }
    }).setText(el.getText()).injectInside(el);
    var fx = hover.effect('clip', {'wait': false, 'duration':600, 'transition':Fx.Transitions.Quint.easeOut});
    el.addEvents({
      'mouseover': function () {
        fx.start([0,width,height,0]);
      },
      'mouseout': function () {
        fx.start([0,mid,height,mid]);
      }
    });
  });
});

Let’s get our links with a css selector and loop through each of them. Then we’ll save the values that we’ll be using a lot in some variables. Next we’ll create the overlay span, give it a class, set some styles to place it over the original link and hide it, set its text to the same as the link, and inject it inside the link. Easy peasy.

After that, we create an effect that will alter the clip property values of our overlay span. Almost done now. To start the effect, we just add mouseover and mousout events that adjust the clip appropriately. By changing the clip values, you could have the color slide in from any direction. See it in action below:

• These aren’t images!
• And they aren’t made with flash!
• It’s all dynamic javascript!

This entry was posted on Wednesday, August 8th, 2007 at 11:20 am and is filed under flash without flash and tagged with demo, flash, mootools, text, v1.11. You can follow any responses to this entry through the RSS 2.0 feed.