Mootools Tutorial: Text fading effect on links

Mootools is one of the best Javascript frameworks available. It is fast to load, powerful and allow you to create stunning visual effects. In this tutorial, I'm going to show you how you can easily create an absolutely stunning fading effect on your links.


Getting started

Of course, the first thing to do is downloading the mootools framework. In this exemple, I’m using a version released last year (That you can download here) but there’s no particular reason why it shouldn’t work with other versions.
If you want to see a live demo of this effect, just have a look here and mouse ouver the links on the menu or the sidebar.

You’ll also need a separate .js file to put the script. You can embed the javascript code within the <head> and </head> html tags if you prefer, but in my opinion it is better to have the Javascript code in a separate text file.

Integrating the framework in your HTML page

Nothing hard here. Once you created an empty file named links.js, you can integrate both the Mootools framework and this file in your html document:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="links.js"></script>

The code

We’re now ready to play! Open your links.js file and fill it with the following code:

window.addEvent('domready', function() {
var list = $$('a');
list.each(function(element) {
        var fx = new Fx.Styles(element, {duration:500, wait:false});
        element.addEvent('mouseenter', function(){
                fx.start({
                        'color': '#999'
                });
        });

        element.addEvent('mouseout', function(){
                fx.start({
                        'color': '#000',
                });
        });

});

Right now, when you’ll mouse over any of your links, they’ll fade from #999 to #000. Very nice, isn’t it?