CSS Sprites2 – It’s MooTools Time

February 18th, 2009

A few months ago you may have read Dave Shea’s entry on A List Apart “CSS Sprites2 – It’s JavaScript Time” where he implemented a variant of his own CSS Sprites article by adding jQuery based animations. In this same article Dave encouraged us [developers] to port it to other libraries, so after a few months of inactivity I’m back with the MooTools port of this slick effect.

Enter the MooTools

While the original version used jQuery (1.2.6 at that time) and lots of people like it, we (mootoolers) have a different approach to code specially emphasizing on OOP techniques and readability. Part of the issue might not be jQuery per-se and be Dave’s code that was a little obfuscated, but it anyways has a lot of room for improvement.
This article will just describe differences between the MooTools implementation and the Dave’s jQuery one, so unless stated otherwise, everything from the ALA article applies here.

enter the Sprites2 class

Part of the requirements I imposed myself when porting to MooTools was that it had to be easier to use than the jQuery version, and that it should give a certain degree of flexibility to extend the possible transition effects.
End result is a class intuitively named Sprites2, where you gracefully pass named parameters:

1

new Sprites2({mode: 'fade', item_selector: 'ul.nav a', duration: 250});

Now that’s classy! [stupid pun, I know]
Notice that these parameters above are the class defaults, so you could have just as easily used new Sprites2(); and the end result would be the same.

changes to original code and idea

Apart from moving the code to a class, a change to note is the removal of the :active state from the CSS and the setActive parameter in the JS code. This was mostly a personal preference as the :active pseudo-class created a few issues when holding the mouse on the element and releasing outside of it. Other notable changes in the CSS are the simplification of the implementation/adaptation process by using a simpler approach on the styles (for example, using height:100%; where applicable instead of redefining height:48px; 5 times in the CSS).

MooTools also has a free “upgrade” built-in: animations have an internal state so that if you roll out from the element and enter it again, the transition will continue to run smoothly. In contrast, jQuery version (may be by code design, maybe because of a library limitation) flickers madly when you roll over and out of the element repeatedly with an interval less than the effect duration.

Also to note, and as mentioned, the Sprites2 class can be easily extended outside of the sprites2.js file with just a few lines of code to create for example a horizontal slide effect:

1
2
3
4
5
6
7
8
9
10

Sprites2.implement({
  effects: {
    slide_x: function(fx_element) {
      fx_element.store('width', fx_element.getSize().x).setStyles({'width': 0});
 
      this.show_fn = function(fx_element) { fx_element.tween('width', fx_element.retrieve('width')); };
      this.hide_fn = function(fx_element) { fx_element.tween('width', 0); };
    }
  }
});

and you can start using it right away with new Sprites2({mode: ’slide_x’});. This obviously works any way you want, as you can manually add or remove the effects directly in the source file.

download, full demo and requirements

The example here is running on a standard google hosted version of mootools 1.2.1. For those of you that use custom builds, just be sure to add FX.Tween and FX.Morph to your standard array of includes (morph is only used by the “animate” effect, so if you don’t use that one you can exclude it.)

View full online demo

Download Sprites2 for MooTools [zip].

new! – by popular demand (not really), I have just set-up a git repo so you can fork the latest source: http://github.com/gonchuki/sprites2-moo

License: Creative Commons Attribution-Share Alike 3.0
disclaimer: original code did not contain any license whatsoever (like all ALA code), so I assumed a CC share-alike license applies perfectly in this case.

This entry was posted on Wednesday, February 18th, 2009 at 2:29 pm and is filed under css, html, javascript, mootools, patterns, usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

19 Responses to “CSS Sprites2 – It’s MooTools Time”

  1. fabio m. costa says:
    February 18th, 2009 at 8:06 pm

    Very nice code, the difference from mootools version’s and jquery’s is clear, mootools effects rox.
    Congratulations.

  2. MooTools Powered CSS Sprites » Clientcide (Formerly CNET's Clientside) says:
    February 19th, 2009 at 3:15 pm

    [...] Apart about CSS sprites that inspired Uruguayan MooTools developer Gonzalo Rubio (aka gonchuki) to take the practice and apply using MooTools: While the original version used jQuery (1.2.6 at that time) and lots of people like it, we [...]

  3. Chris Drackett says:
    February 27th, 2009 at 1:30 am

    when I try and view the examples the events (for all items on the page) fire when I mouse in and out of the browser window. I’m using safari on a mac. They don’t work when I mouse over the buttons.

  4. gonchuki says:
    February 27th, 2009 at 2:51 am

    fixed, seems I updated the site with the wrong code, github version was working correctly tough as it had the correct updated source.

  5. sophy says:
    March 10th, 2009 at 10:52 pm

    Good article, thanks

  6. Nigel says:
    March 23rd, 2009 at 11:34 am

    Great article, I was trying to use this effect for a menu on a website where the links are normal text and just the background graphic is animated. I can get this to work fine but I also need to animate the links from one color to another, any suggestions?

  7. gonchuki says:
    March 23rd, 2009 at 12:41 pm

    I’m guessing the easiest way is by writing a small extension in the form of:

    Sprites2.implement({
  effects: {
    fade_plus: function(fx_element) {
      fx_element.fade('hide');
 
      this.show_fn = function(fx_element) { 
        fx_element.fade('in');
        fx_element.getParent().getElement('a').tween('color', '#0b0');
      };
      this.hide_fn = function(fx_element) {
        fx_element.fade('out'); 
        fx_element.getParent().getElement('a').tween('color', '#b00');
      };
    }
  }
});

    just adapt the colors as you need them, or use Fx.Morph to enable the transition using a CSS class.

  8. Nigel says:
    March 24th, 2009 at 9:54 am

    Thank you so much for your quick reply, that worked great.

    Just 2 quick question, is there a simple way to may the slide come from the bottom rather than the top? Also is there a way to extend this class to use its effects on normal link buttons within a page?

    Thanks again.

  9. gonchuki says:
    March 24th, 2009 at 11:46 am

    the first one would be a little more complex… out of the top of my head I can just think of a .morph using height, top and background-position to achieve the same “cover” effect. You could use the “animate” effect as a base, and work it from there.

    the second, it’s not the intended use. The class is purposely written for simplifying sprite-based navigation bars, you can always add extra code to handle different kind of animations or uses, but keep in mind that it was not the original idea.

  10. Comparing Mootools and jQuery Animation | Ractoon - Web Development and Design says:
    March 27th, 2009 at 12:53 am

    [...] direct comparison between the article demo and a Mootools equivalent can be viewed here. gonchuki has even gone so far as to develop a Sprites2 class for Mootools to make future [...]

  11. Amos says:
    May 4th, 2009 at 3:09 pm

    This article is great, and I have seen a few that discuss keep Sprites alive and better with MooTools, Jquery, etc…

    BUT – none of them go the extra step and demonstrate using IMAGES with Rollovers that trigger dropdown menus. A number of people “out there” have been asking for this kind of help.

    If you are able to take it another step to include Images, Rollovers, and Dropdowns it would be a great benefit to the wider-community.

    Thanks

  12. gonchuki says:
    May 4th, 2009 at 3:33 pm

    @Amos:
    There’s no need to make samples for that, as this plugin/idea can be put on top of whatever drop-down menu code you are already using. It’s just a matter of adding some little markup and CSS and you are set.

    Like I said in my previous comment you always have the option to add code where you need, but the main focus of this blog is to show special use cases of common functionality, favoring academic research over cut-and-paste-ready code.

  13. twincascos says:
    May 28th, 2009 at 8:50 am

    Great mootools plugin,
    love the taste of that milk…moo just slides right in there.
    Thanx for publishing your work,
    learning every day..

  14. MooTools Tutorials and Resources Round-Up « Tech7.Net says:
    July 28th, 2009 at 12:57 pm

    [...] CSS sprites with MooToolsA MooTools version of an article published on A List Apart about CSS sprites using jQuery. [...]

  15. MooTools Tutorials and Resources Round-Up - Programming Blog says:
    July 28th, 2009 at 8:17 pm

    [...] CSS sprites with MooToolsA MooTools version of an article published on A List Apart about CSS sprites using jQuery. [...]

  16. AMB Album » MooTools Tutorials and Resources Round-Up says:
    July 29th, 2009 at 4:27 am

    [...] CSS sprites with MooToolsA MooTools version of an article published on A List Apart about CSS sprites using jQuery. [...]

  17. Josh says:
    July 30th, 2009 at 11:53 am

    Thanks for this….This is a great effect!

  18. MooTools Tutorials and Resources Round-Up | VNAMEDIA Sharing Center says:
    August 2nd, 2009 at 8:10 am

    [...] CSS sprites with MooTools A MooTools version of an article published on A List Apart about CSS sprites using jQuery. [...]

  19. MooTools??????????? | CssRainBow.cn says:
    August 13th, 2009 at 4:25 am

    [...] CSS sprites with MooTools A MooTools version of an article published on A List Apart about CSS sprites using jQuery. [...]

Leave a Comment

« updating moopop for mootools 1.2