| |
|
| Descripción | |
| Este sencillo
objeto te permitirá efectos de estela siguiendo a tu ratón.
Aquí tienes tres ejemplos que te ilustrarán sobre la
forma de usar este objeto para lograr unos curiosos efectos, usa tu imaginación
para mejorarlo. |
|
| Como usarlo | |
| El uso de este objeto
es bien simple: declaras una variable global para contener el objeto
estela usando el operador new:
estela = new oEstela(puntos, separ_der, separ_izq, separ_sup, separ_inf) El argumento puntos es una matriz o array con
los identificadores de los bloques DIV que deberán existir en
la página,
Estos bloques pueden contener imágnes o simplemente los haces
de un tamaño aproximadamente igual a 3x3 pixels y un color de
fondo con lo que aparentan ser puntos. También puedes usar un único
bloque con un gif animado. document.onmousemove = new Function("estela.seguir()"); Por último si deseas usar la animación creas un temporizador con setInterval( ) estela.tempor = setInterval('estela.animar()',100); En este caso la función de animación es la que posee el objeto oEstela, pero puedes usar una definida por tí como en el siguiente código estela.tempor=setInterval('mianimacion(estela)',100); La función mianimacion( objetoestela) simplemente
calcula los valores de las coordenadas horizontal y vertical (x, y)
y sitúa
los bloques DIV (los puntos) de acuerdo con ellas. Para acceder a los
bloques usas el método
puntos del objeto oEstela que debes pasarle como argumento. |
|
| Como funciona | |
| Básicamente
se trata de utilizar el evento onmousemove. Este evento se vincula con
una función
que situará un objeto en la posición del ratón,
es decir, moverá un objeto
junto al ratón. Este objeto puede ser una imagen, un gif animado,
un texto o una serie de puntos moviéndose. En la página de
muestra podrás ver tres formas de usar este curioso efecto. Incorpóralas
a tus páginas tal como están o modifícalas a tu gusto. |
|
 |
|||
 Bajarlo |
 Verlo |
||
 |
|||