I’m not really sure what to call this animation. Essentially what happens is a shape grows and fades when a link is hovered over. I don’t have an example site either, as my inspiration comes from a DS game. Here is the demo.

The HTML

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a class="active" href="#">Current page</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Easy. Just a basic list.

The CSS

#nav {
  list-style:none;
  margin:1em;
}
#nav li {
  float:left;
  z-index:2;
}
#nav a {
  display:block;
  position:relative;
  z-index:3;
  padding:10px;
  color:#069;
  background-color:#fff;
  text-decoration:none;
}
#nav a:hover {
  color:#fff;
  background-color:#036;
}
#link_focus {
  position:absolute;
  background-color:#fff;
  z-index:1;
}

Pay close attention to the z-index values. They are necessary for the effect to work correctly, and by changing them, you can change the look of the effect. Right now, the element we will be creating is underneath both the li and the link. Setting the link position to relative also seems to be necessary.

The JavaScript

var ButtonExplode = {
  start: function () {
    var el = new Element('div', {'id': 'link_focus', 'styles': {'opacity':0}}).injectInside(document.body);
    var fx = el.effects({'duration':600, 'wait':false, 'transition':Fx.Transitions.Circ.easeOut});
    $$('#nav li a').addEvent('mouseover', function(){
      el.setStyles({
        'top': this.offsetTop,
        'left': this.offsetLeft,
        'width': this.offsetWidth,
        'height': this.offsetHeight,
        'opacity': 1
      });
      fx.start({
        'opacity':0,
        'height': this.offsetHeight + 40,
        'top': this.offsetTop - 20
      });
    });
  }
}
 
window.addEvent('load', ButtonExplode.start);
});

Here, we create a new element, give it the #link_focus id, the same as in the CSS, set its opacity to 0, and inject it into the page. Next we create an effect for that element using the Fx.Styles shortcut. Then we add a mouseover event to all the links. In that event we align the element we created underneath the link, set its width and height to the same as the link, and set its opacity to 0. Then we start the effect, animating the opacity to 0, height to 40 plus the original, and top to the original minus 20. The only reason the top is animated is to give the effect that the element is growing from the center outward.

Finally, to get this all started, we add a load event to the window that calls ButtonExplode.start().

Modifications

By changing the z-index values, you can place #link_focus between the link and its parent li. If the link doesn’t have a background color, all of #link_focus will be visible.

The effect can grow #link_focus horizontally, too. In the effect, just animate the left and width properties in addition to those already present.

This entry was posted on Sunday, October 21st, 2007 at 8:10 am and is filed under flash without flash and tagged with demo, flash, link-explode, mootools, v1.11. You can follow any responses to this entry through the RSS 2.0 feed.