Ratón con texto pegadizo

Solución

<script  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);

}

 <body color ="#FFFFFF" >

< script language="Javascript">

iniciarEstela("Felicidades");

< /script>

< !--Contenido de tu página-->

< /body>

Explicación

 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.

Como lo uso

 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.