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
Acceder