Ratón con texto pegadizo

El script Como funciona

 language="JavaScript" src="rutbasicas.js"> </script> <script language="JavaScript" src="estela.js"> </script> <script language="JavaScript"> function mianimacion(objest)
{
var indAct, x, y, xfin, yfin, blqAct;
var incX, incY;
for(indAct = 0;indAct < objest.puntos.length; indAct++)
    {
    blqAct = objest.puntos[indAct];
    x = blqAct.xAct;
    y = blqAct.yAct;
    xfin = objest.referX+indAct*10;
    yfin = objest.referY;
    incX = 6*objest.puntos.length/(1+indAct);
    incY = 6*objest.puntos.length/(1+indAct);
    if (x < xfin)
        {
        x += incX;
        if (x > xfin) x = xfin;
        }
    else{
        if (x > xfin)
            {
            x -= incX;
            if (x < xfin) x = xfin;
            }
        }
    if (y < yfin)
        {
         y += incY;
        if (y > yfin) y = yfin;
        }
    else {
        if (y != yfin)
            {
            y -= incY;
            if (y < yfin) y = yfin;
            }
        }
    blqAct.xAct = x;
    blqAct.yAct = y;
    blqAct.style.left = x;
    blqAct.style.top = y;
    blqAct.fin =(x == xfin) && (y == yfin)
    }
}
//El evento temporizador sólo entiende de variables globales
//por eso se declara aquí la variable estela
var estela;
function iniciarEstela(texto)
{
var puntos = new Array();
for (i=0; i< texto.length; i++)
    {
    document.write('<div id="l'+i+'" style="position:absolute');
    document.write('width:1px; height:1px; color: red; ');
    document.write('z-index:14; left: 0px;')
    document.write(' top: 0px">'+texto.charAt(i));     document.write('</div>') puntos[i]="l"+i;
}
estela = new oEstela( puntos, -1,10, -1, 20);
for (i=0; i< estela.puntos.length; i++)
    {
    estela.puntos[i].xAct = estela.referX;
    estela.puntos[i].yAct = estela.referY;
    estela.puntos[i].fin = false;
    }
document.onmousemove = new Function("estela.seguir()");
estela.tempor = setInterval('mianimacion(estela)',5);
}

 Aquí tienes un ejemplo de utilización del objeto ratón con estela que puedes descargar en la sección APPZ de esta web. Se trata de una frase que seguirá al ratón con un movimiento elástico. Si observas el ratón en esta página comprenderás el efecto que se hace más evidente si mueves el ratón con cierta rapidez.

Para estudiar y poder entender el funcionamiento de este script deberás leer la documentación del objeto estela. Descarga en tu sitio el archivo js del objeto estela, o enlázalo al de esta web, y añade las funciones que aquí te presentamos.

La primera de estas funciones es iniciarEstela(texto), el argumento es el texto que seguirá al ratón. Esta función coloca en la página las letras de la frase que seguirá al ratón (cada letra se coloca en un bloque DIV para poder controlar su posición), además crea e inicializa el objeto oEstela propiamente dicho y vincula los eventos de movimiento del ratón y el temporizador para ir actualizando la posición del texto.

La otra función del script, mianimación(), es la que se encarga de ir colocando las letras para que sigan al ratón con este curioso efecto.

La página Como se usa
 <body color ="#FFFFFF" >
< script language="Javascript">
iniciarEstela("Felicidades");
< /script>
< !--Contenido de tu página-->
< /body>
 En la página sólo debes colocar la llamada a la función que crea la estela y dispara la animación del texto. Recuerda los arhivos necesarios están en la aplicación ratón con estela de la sección APPZ de esta web.
   
     
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio