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.
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?
It such a simple and effective tip, definitely worth implementing in any site. Thanks.
Cool tips. It will make my blog looks more interesting with this. Thanks for sharing.
Wei Liang
Thanks, guys!
it is fun adding these to my page. this will add more interest and effects. thanks!
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 …
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 …
it looks great on firefox.
but isn’t it working on ie7?
@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)
doesnt work in ie7.
so its useless, ie. no point.
It also should work on iE, I use a likewise script. Maybe remove , behind ‘color’: ‘#000′
I really enjoy Mootools framework.
Although Jquery is right up there too
Working fine here with Firefox.
Great effect. Slim code to, so you can really spice up a site without weighing it down.
I can use this one for some of my social sites. Thanks.!
i use jquery for ‘Text fading effect on links’ in blogspot. thanks for sharing.