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.

24 Responses to “CSS Sprites2 – It's MooTools Time”

  1. fabio m. costa says:

    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:

    [...] 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:

    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:

    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:

    Good article, thanks

  6. Nigel says:

    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:

    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:

    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:

    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:

    [...] 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:

    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:

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

    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:

    [...] 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:

    [...] 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:

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

  17. Josh says:

    Thanks for this….This is a great effect!

  18. MooTools Tutorials and Resources Round-Up | VNAMEDIA Sharing Center says:

    [...] 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:

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

  20. MooTools Tutorials and Resources Round-Up « Smashing Magazine says:

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

  21. MooTools Tutorials and Resources Round-Up | TuVinhSoft .,JSC says:

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

  22. Ben says:

    Any solution to implementing this into ASP.NET websites? I tested this code and it works fine in an HTML document but when you move it inside the tags in an .aspx file it stops working. Any ideas?

  23. gonchuki says:

    The solution looks to be like they told you in the forum you posted the question [http://forums.asp.net/p/1526520/3683818.aspx]

    I have little experience with .NET, but as far as I can tell it's surely an issue with the ugly templating that .NET Framework uses and the unpredictability of element IDs.

  24. Peter says:

    First: excellent solution, pretty, clean motion! Thank YOU for sharing!

    Second: What if one wanted to make this into an include file for a PHP file?

    I've seen some similar CURRENT PAGE scripts use the body id or a PHP function inserted at the top of the page to identify the page as the CURRENT PAGE, but the List Apart solution and yours only calls the class of the current page within the LI tag for each link so it performs only if the code is included inline.

    So, for a non-techie like myself, trying to figure out how to modify the JS and CSS for use in a PHP include file — i.e., exactly where and what to change to make it recognize when to use the CSS for the CURRENT PAGE as an include file is… a bit daunting.

    Is this an easy fix, or does it require major revamping?

    Any guidance would be greatly appreciated.

    You rock!

Leave a Comment