Dégradé de couleur sur un lien avec Mootools

Depuis quelques années, de nombreux frameworks Javascript open-source ont vu le jour. J'avais déja parlé de JQuery et de Ext.js, voici un petit article sur Mootools (ou plutot, sur une petite partie de Mootools!), un framework Javascript "Nouvelle Génération", puissant et compact.

Téléchargement et inclusion

Bien entendu, la première chose à faire est de télécharger le framework sur cette page. Même si un formulaire vous permet de choisir uniquement les classes dont vous avez besoin, pour le développement et les tests, mieux vaut télécharger l'intégralité du framework. Pour celà, scollez en bas de page et sous "Choose compression type" sélectionnez "No Compression". Vous disposez alors de toutes les classes de Mootools.

Attention: Par plusieurs fois, j'ai téléchargé Mootools après avoir sélectionné les classes que je voulais et au final certaines classes/méthodes étaient manquantes dans le fichier js.

La suite des opérations consiste à inclure le framework dans notre document XHTML.

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

Dans cet exemple, le fichier myeffects.js contiendra les scripts que nous allons écrire.

Avant de commencer

Il est conseillé, selon la documentation du framework, de toujours commencer par la méthode window.addEvent. Cette méthode permet de à éxecuter le script dès que l'arbre dom est chargé, mais sans attendre le chargement des images de la page. Son utilisation:

window.addEvent('domready', function() {
// Votre code Mootools
});

Le dégradé

Mootools permet de faire énormément de choses, ne serais-ce qu'au niveau des effets visuels. Un bon exemple "Pour commencer" serait d'appliquer un effet sur tous les liens de notre page. La couleur du lien sera noire (#000) en état normal, et grise claire (#999) au survol. Grace à Mootools, nous allons procéder à une transition entre les deux couleurs:

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',
                });
        });

});

-Tout d'abord, nous indiquons au browser que le script peut être exécuté dès que l'arbre dom est chargé via la méthode window.addEvent().
-Le raccourci $$ permet de créer un tableau contenant tous les éléments indiqués en paramètre. Dans cet exemple, nous avons créé une variable list contenant tous les liens (a) de la page.
-Pour chaque élément contenu dans la variable list, nous appliquons une fonction anonyme qui va instancier la classe Fx.Styles et retourner un objet nommé fx.
-Grâce à la méthode addEvent, nous définissons ce qui doit se passer lorsque la souris entre sur la zone de l'élément (mouseenter) et la quitte; (mouseout) en l'occurence, appliquer la méthode fx.start.

Les paramètres de la méthode fx.start sont la propriété CSS (ici, color) et sa valeur. Dans cet exemple, j'ai seulement utilisé la propriété color, mais bien évidemment il est possible de passer en paramètre n'importe quelle propriété CSS. Il y a de quoi expérimenter et créer des effets saisissants en un rien de temps.
N'hésitez pas à jeter un oeuil sur les démos officielles. Il y a de quoi s'amuser