Alejandra 11 de Junio de 2008 a las 11.30
   Imprimir artículo
elWebmaster.com

Tutorial: Elementos que parpadean con MooTools


Tutorial: Elementos que parpadean con MooToolsDavid 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 >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión