This afternoon I was perusing the web and ended up mining Yelp for something to do in this new and foreign city. I noticed a slick effect that was used to keep the map in the view port as you scrolled. I had done this before with the position:fixed css directive, but it's rather limited especially in a centered layout. You also can't choose your easing equation or delay the effect... Thanks Moo, let's do it.

I added a set of links which link to targets on this page in my sidebar entitled "On this page...". I want the links to scroll the page to the targeted element, and I also want the links to follow me there so I can click on another one if I need to. 8 lines of javascript with the aid of Mootools gets her done.

var slideEffect = new Fx.Style('sidenav', 'margin-top', {wait:false, duration:800, transition:Fx.Transitions.circOut});
  window.addEvent('load', function() {
    var top = $('sidenav').getPosition().y - 10;
    window.addEvent('scroll', function(){
      slideEffect.start.delay(600, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
    });
    new SmoothScroll({duration:700, transition:Fx.Transitions.circOut});
  });

Let's analyze the crap out of this code. I first create a new Fx.Style specifying wait:false (so If I start scrolling down the page and than suddenly switch direction, the effect will simply start over in that new direction). I'm modifying the margin-top property of the sidenav element. I also specify a custom transition circOut which starts fast and than slows to a stop. Using window.addEvent('load', I wait for the document to load because the position of my div is relative to the image of my face. You could use the domready event if the position of the div you will be scrolling is not relative to an image... Next I get the position of the top of my div and subtract 10 from it to give it some padding.

Now for the magic. I listen for the scroll event and when it happens I fire the recently created slideEffect. However, because the delay is cool and if I don't delay the effect will look really jumpy, I delay the start of the effect. Moo provides a delay method which can be called on any function. You have to call it on the function, not on the thing the function returns: e.g. myFunction.delay(100) or function(){return 'rad'}.delay(300) instead of myFunction('awesome').delay(30). The second attribute to delay is an object that will become this in the function delay is being called on. In this case we want this to be the effect itself. The third attribute is the attribute(s) that will be passed into the function. For us, this is an integer representing the new margin. We calculate this as the maximum of either 0 or the difference of the current viewport offset and the original offset of the image.

The last thing to do is make a call to SmoothScroll, making all links that point to a target scroll to the element with that targets id (this was detailed in my last post). So there it is, a detailed description of how my sidebar and mootools did it.

I’ve been loving mootools lately so I figured I would demonstrate some of it’s awesomeness by explaining a few of the effects generated on this very page.

Awesome bouncy nav tabs (upper right, funny creative projects)

$$('#header ul li a').each(function(el) {
  var bounce = new Fx.Style(el, 'top', {duration:700, transition: Fx.Transitions.elasticOut});
  var colors = new Fx.Styles(el, {wait:false});

  el.addEvent('mouseover', function(){
    el.setStyle('background-color', '#d5e88f');
    bounce.start(15,0);
    colors.start({
        color: '35342e'
    });
  });
  el.addEvent('mouseout', function(){
    colors.start({
        'background-color': '35342e',
        color: 'd5e88f'
    });
  });
});

Allright, so moo gives us a DOM selector much like prototypes. I use it to grab all the a tags in my nav list, and then I iterate over them. Moo has three generic Fx classes, Style, Styles, and Elements. I don’t use Fx.Elements here, but you can read about it via moos excellent documentation. If you are familiar with the scriptaculous Morph effect, these will come natuarlly. They let you tween a list of css attributes, leaving the door of possibilities for amazing custom effects wide open.

First I create two effects. One to deal with the motion, bounce, and the other to deal with font and background color, colors. Moo supplies an optional set of robust transitions based on Robert Penner’s easing equations (the easing demo is extremely helpful). I specify the elasticOut transition upon instantiation of the bounce effect to make it, well bouncy. Setting wait to false in the Fx.Styles call tells the effect to go ahead and run even if there is another effect just like it already running. This let’s the tab fade back to normal if I mouseout before it’s finished.

After the effects are created, all that’s left is attaching them to an event. Voila, crazy cool bouncy tabs.

A silly unobtrusive smooth scrolling effect (click “it’s not what you think” next to the VD logo)

new SmoothScroll({duration:1000});

Another optional effect (thank you kickass building tool), is SmoothScroll. Upon instantiation she finds all of the targets (aka anything with an id) and adds an event to all the a tags referencing that target (aka href=”#name_of_target”), which scrolls the window to that element… just click it.

Opaque image rollover (what the flick)

$$('div#flickr img').each(function(e){
  var fade = new Fx.Style(e, 'opacity', {wait:false});
  fade.set(.5);
  e.addEvent('mouseover', function(){
    fade.start(1);
  });
  e.addEvent('mouseout', function(){
    fade.start(.5);
  });
});

This uses the same techniques as the first effect. The set method allows you to set the initial position of the effect. In this case it makes all of the images 50% opaque when the page loads.

So there you have it. Mootools is silly powerful and fun. It puts the control in your hands, and does so in a lightweight and extremely sexy manner.