Mootools Tutorial: Text fading effect on links

by Jean. 15 Comments -

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.

If you’re new to Mootools you should check out this great tutorial that will teach you Mootools basics and show you an exemple of its numerous possibilities.

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?

  • http://www.neowster.com Neowster

    It such a simple and effective tip, definitely worth implementing in any site. Thanks.

  • http://abloggerblog.com Wei Liang | ABloggerBlog

    Cool tips. It will make my blog looks more interesting with this. Thanks for sharing.

    Wei Liang

  • http://www.lyxia.org jbj

    Thanks, guys!

  • http://www.phpdebutant.com Php Tutorial

    it is fun adding these to my page. this will add more interest and effects. thanks!

  • Pingback: Vote for this article at blogengage.com

  • Pingback: Added by a PAL to FAQ PAL

  • mt85

    it looks great on firefox.
    but isn’t it working on ie7?

  • http://teraom.com teraom

    @mt85 – mootools is a standard library. it works in the worst of all browsers (read ie6) . so it should work in the second worst too (read ie7)

  • http://www.mootywebdesign.com.au Michael Coyle

    doesnt work in ie7.

    so its useless, ie. no point.

  • Zillion

    It also should work on iE, I use a likewise script. Maybe remove , behind ‘color’: ‘#000′

  • http://bradblogging.com Brad Blogging.com – Personal Blog Tips And Blog Help

    I really enjoy Mootools framework.

    Although Jquery is right up there too :D

  • http://hubpages.com/hub/RUNDLL-error Rundll Error

    Working fine here with Firefox.

  • http://www.digital-tv-converter.info Jason

    Great effect. Slim code to, so you can really spice up a site without weighing it down.

  • http://www.caviteniofilipino.blogspot.com Cavite Philippines

    I can use this one for some of my social sites. Thanks.!

  • http://deconstructioncode.blogspot.com/ nady

    i use jquery for ‘Text fading effect on links’ in blogspot. thanks for sharing.