Cambio de color en el texto con efecto de barrido.

En categoría: Efectos en el Texto

Este ejemplo JavaScript nos permite escribir un texto mediante document.write para aplicarle un cambio de color con un efecto de barrido de un color sobre otro. .

| Descripción del ejemplo JavaScript

Para esto definimos una variable que contendrá el texto que queremos insertar en la página y otras dos variables que definirán los colores a utilizar. También es posible modificar el intervalo de tiempo en el que se debe ejecutar el cambio de color sobre cada caracter del texto.

Primero escribimos mediante document.white las etiquetas necesarias para darle formato al texto que almacenamos en la variable Texto. En el ejemplo se utiliza el atributo color que tomará el valor de la variable ColorFondo. También podríamos usar otros atributos para formatear el texto a nuestro gusto. Por ejemplo podríamos escribir:

document.write('<font size="7" color="'+Color_Fondo+'">')

Así esteremos definiendo un tamaño de 7 puntos al texto insertado. También es posible usar sintaxis CSS con todas las propiedades soportadas por el texto.

Los nombres de colores que podemos utilizar en las variables ColorFondo / ColorTexto son:

Código de nombre de colores soportados
Silver	Black	Gray	White	Maroon	Red	Purple	Fuchsia
Green	Lime	Olive	Yellow	Navy	Blue	Teal	Aqua

Aunque también es posible utilizar el código hexadecimal para lograr colores personalizados.

Lo mismo hacemos para insertar cada caracter del texto. Escribimos una etiqueta <SPAN> para cada caracter del texto definido en la variable Texto. A cada una de estas etiquetas le asignamos un identificador ID.

La función Efecto() recorre los caracteres desde el primero hasta el último y aplica la propiedad color al caracter insertado en la etiqueta <SPAN>. Luego se cambia el color del caracter asignando a la variable color el color definido en ColorTexto.

Información relativa al Script

Compatible con: Internet Explorer

Internet Explorer

Firefox

Tamaño del Script: 2KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para cambiar el color del texto y aplicar 
un efecto de barrido de un color sobre otro.

Código fuente del script:

<HTML>
<HEAD>

<script language="javascript">

// Definimos el texto al cual vamos a aplicarle el efecto de cambio de color */
var Texto = "Cambio de color en el texto con efecto de barrido";

// Definimos el color de fondo del texto
var ColorFondo = "#dd0000"
// Definimos el nuevo color para el texto
var Colortexto = "#0000ff"

// Definimos el tiempo que tardará el efecto en completar un caracter del texto
var Velocidad_Intervalo = 50 // En milisegundos

/* ****** NO EDITAR ****** */
var n = 0

// insertamos la etiqueta FONT con los atributos que queramos
	document.write('<FONT color="'+ColorFondo+'">')
	// Recorre caracter por caracter del texto
	for (m = 0; m < Texto.length ; m++) 
	// Creamos una etiqueta Span para cada caracter del texto
	document.write('<SPAN id="spanefecto' + m + '">' + Texto.charAt(m) + '</SPAN>')
	document.write('</FONT>')
	
// Creamos la función que aplica el efecto de cambio de color en el texto
function Efecto() {

if (n == 0) {
	// Recorre los caracteres desde el primero hasta el último
	for (m = 0; m < Texto.length ; m++) {
	// Da a la propiedad color el valor definido en ColorFondo
	color = "document.getElementById('spanefecto" + m + "')"
	color = eval(color)
	// Cambiamos el color en el caracter correspondiente
	color.style.color = ColorFondo;
	}
}

// Damos a la propiedad color el valor definido en ColorTexto
	color2 = "document.getElementById('spanefecto" + n + "')"
	color2 = eval(color2);
	color2.style.color = Colortexto;

// Mientras no llegue al último caracter, incrementa 1
if (n < Texto.length-1) {
	n++
}

else {
	// Vuelve a comenzar
	n = 0
	// Finaliza el timer
	clearInterval(IdIntervalo);
	// Vuelve a ejecutar el timer llamando a la función que comienza el efecto 
	setTimeout("Comenzar()",Velocidad_Intervalo);
}

} // Fin de la función Efecto()

// Función que se ejecuta solo cuando comienza el efecto
function Comenzar() {

IdIntervalo = setInterval("Efecto()",Velocidad_Intervalo);

} // Fin de la función Comenzar()

// Ejecutamos la función
Comenzar()

</script>

</HEAD>

<BODY>

</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: Cambio de color en el texto con efecto de barrido

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.