Tutorial: Elementos que parpadean con MooTools

David Walsh publicó en su blog un excelente tutorial pensado puntualmente para llamar la atención de los usuarios en diferentes situaciones. Usando el framework de MooTools David creó elementos que parpadean intermitentemente. Para lograrlo implementó “flash()”, que se puede usar sobre cualquier elemento del sitio.

¿Quieres hacer lo mismo? Aquí te damos todos los recursos, XHTML, el JavaScript de MooTools y te decimos cómo usarlo, con código y todo…

El XHTML

<div id="flash-me">     <a href="javascript:;" id="flash-link">Click here</a> to make me flash!</div>

El código de arriba es una muestra de XHTML. Tu puedes hacer que tu propio código XHTML luzca como quieras.

El JavaScript de MooTools

Element.implement({
    flash: function(to,from,reps,prop,dur) {  

        //defaults
        if(!reps) { reps = 1; }
        if(!prop) { prop = 'background-color'; }
        if(!dur) { dur = 250; }  

        //create effect
        var effect = new Fx.Tween(this, {
                duration: dur,
                link: 'chain'
            })  

        //do it!
        for(x = 1; x <= reps; x++)
        {
            effect.start(prop,from,to).start(prop,to,from);
        }
    }
});

La función flash usa de 2 a 5 parámetros:

1. From: El color inicial del elemento que parpadea.
2. To: El color que se “ilumina” cuando el elemento parpadea.
3. Reps: Número de veces que se repite el parpadeo.
4. Property: Propiedad de flash. El color de fondo funciona mejor.
5. Duration: La duración del cambio de color.

El uso

/* flash on click */
$('flash-link').addEvent('click', function () {
    $('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});  

/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
    //make the ajax call
    var req = new Request({
        method: 'get',
        url: 'element-flashing.php',
        data: { 'do' : '1' },
        onRequest: function() {  },
        onComplete: function(response) {
            $('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500);
        }
    }).send();  

});  

/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
    var scroller = new Fx.Scroll(window, {
        onComplete: function() {
            $('scroll-to-me').flash('#fff','#fffea1',10);
        }
    }).toElement('scroll-to-me');
});  

El código de arriba contiene tres ejemplos:

1. El primero hace que un elemento parpadee justo cuando alguien hace clic sobre él.
2. El segundo parpadea cuando se completa la consulta de Ajax.
3. El tercero hace scroll hacia abajo, hasta un elemento determinado, y parpadea cuando llega al elemento.

Haz clic para ver el ejemplo >>