Texto que sigue al cursor del Mouse.

En categoría: Efectos en el Texto

Este JavaScript muestra un mensaje de texto y lo mueve a medida que cambia la posición del cursor del Mouse, siguiéndolo para todos lados dentro de la página.

| Descripción del ejemplo JavaScript

El Script tiene una función llamada EfectoTexto() la cual es llamada desde el evento onLoad de la etiqueta <BODY>. Esta función es la que produce el efecto en el texto. La otra función, PosicionCursor(), como su nombre lo indica nos permite saber la posición, en sus dos ejes (x,y), del puntero del mouse cada vez que se mueve. Para esto utilizamos el evento onmouseMove del objeto window.

El Script que insertamos entre las etiquetas <BODY> y </BODY> escribe, mediante write() la etiqueta <SPAN> que muestra el mensaje de texto. Mediante el atributo class definimos una clase que nos permite formatear a nuestro gusto el texto del mensaje. Podemos cambiar el color, tamaño, tipo de letra, etc.

La variable separacion define el espacio entre los caracteres del mensaje. Para que estos tengan un espacio mayor podemos aumentar el valor de dicha variable. En el ejemplo se definió el valor 20, pero podemos utilizar cualquiera.

La variable mensaje es la que contiene el mensaje de texto que sigue al cursor del Mouse.

La función EfectoTexto() define la posición de cada uno de los caracteres del mensaje y los posiciona uno por uno relativamente a la posición actual del puntero del Mouse. Esta función se ejecuta a la carga de la página para mostrar por primera vez el mensaje y luego se ejecutará mediante la función setTimeout() cada 10 milisegundos. Cada vez que el puntero del Mouse se mueve se vuelve a ejecutar con los valores nuevos de la posición (x,y) del cursor.

Información relativa al Script

Compatible con: Internet Explorer

Internet Explorer

Tamaño del Script: 2KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para mostrar un mensaje de texto que sigue al 
cursor del Mouse por toda la página.

Código fuente del script:

<HTML>
<HEAD>

<script language="javascript">

var validar = 0
var x,y
/* Esta variable define el espacio entre los caracteres 
del mensaje de texto */
var separacion = 20
/* Acá definimos el mensaje a mostrar. 
Nota: Al final del mensaje se agrega un espacio en blanco */
var mensaje = "Código JavaScript "
/* Creamos un Array de la cadena de texto. El valor para 
cada uno de los valores del array será un caracter del mensaje. */
mensaje = mensaje.split("")
// Creamos un nuevo array
var xpos = new Array()

/* Guardamos para cada uno de los valores del array un valor. 
Esto nos permite posicionar cada caracter en el eje x */
for (i = 0; i <= mensaje.length-1; i++) {
	xpos[i] = -50
}

/* Hacemos lo mismo para la posición en el eje y */
var ypos = new Array()

for (i = 0; i <= mensaje.length-1; i++) {
	ypos[i] = -50
}

/* Sacamos la posición del puntero del Mouse en sus dos ejes */
function PosicionCursor(e) {
	x = (document.layers) ? e.pageX : event.clientX
	y = (document.layers) ? e.pageY : event.clientY
	validar = 1
}

function EfectoTexto() {

if (validar == 1) {

/* Definimos la posición (x) más la separación de los 
caracteres y la posición (y) para cada uno de los caracteres */
   	for (i = mensaje.length-1; i >= 1; i--) {
		xpos[i] = xpos[i-1]+separacion
		ypos[i] = ypos[i-1]
   	}
	
	xpos[0] = x+separacion
	ypos[0] = y

/* Escribimos cada caracter en la posición definida 
relativamente a la posición actual del cursor del Mouse */
	for (i = 0; i < mensaje.length-1; i++) {
   		var capa = eval("document.getElementById('span'+[i]).style")
   		capa.posLeft = xpos[i]
		capa.posTop = ypos[i]
   	}
}

/* Ejecutamos la función cada 10 milisegundos.
Cada vez que se ejecuta escribe un nuevo caracter en la posición definida */
setTimeout("EfectoTexto()",10)

}

</script>

<STYLE type="text/css">

.spanstyle {
	position:absolute;
	top:-50px;
	color:FF00FF;
}

</STYLE>

</HEAD>

<BODY onLoad="EfectoTexto()">

<script language="javascript">

/* Escribimos las etiquetas SPAN que contienen cada uno de 
los caracteres del mensaje */
for (i = 0; i <= mensaje.length-1; i++) {
    document.write("<SPAN id='span" + i + "' class='spanstyle'>")
	document.write(mensaje[i])
    document.write("</SPAN>")
}

/* Ejecutamos la función cada vez que movemos el cursor */
document.onmousemove = PosicionCursor;

</script>

</BODY>
</HTML>

	Temas relacionados a este Script:
	Cambio de color en el texto con efecto de barrido Texto que sigue al cursor del Mouse Tooltip con efecto de scrolling en el texto Cambio de color de fondo en el texto Efecto de texto con movimiento temblor Efecto sombra en el texto con movimiento Sombra con efecto pulso en el texto

Comentarios Recibidos sobre: Texto que sigue al cursor del Mouse

Todavía nadie comentó este artículo.
Para insertar un comentario hacé clic en "Comentar artículo"

Comentar Artículo

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.