El objetivo de este taller consiste en modificar un poco el ejemplo relatado en el artículo Animación DHTML de texto en una capa, que haga nuestra una animación un poco más compleja, utilizando un poco de color.

En el ejemplo anterior simplemente habíamos hecho un script para mostrar un texto letra a letra. En este artículo vamos a jugar con los colores, para hacer un par de efectos distintos.

Texto que cambia de color letra a letra

El primer ejemplo que vamos a ver es un texto que cambia de color letra a letra. El titular de la página va a estar siempre escrito y lo que haremos es escribir encima en color rojo, letra a letra. De este modo parece como si el texto cambiara de color letra a letra.

Para entender cuál es el efecto buscado, merece la pena ver el ejemplo en marcha.

El ejemplo se podría haber hecho de varias maneras. Nosotros hemos escogido crear dos capas, que posicionamos en el mismo lugar. Una de las capas tiene el texto fijo escrito en ella y la otra la utilizaremos para escribir el texto letra a letra. El código HTML de las capas tiene esta forma:

<div id="textofondo" style="font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
Bienvenidos a mi pagina web!!!
</div>
<div id="textomovimiento" style="color: #cc0000; font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
</div>

Nos fijamos que la capa con id "textofondo" contiene el texto del mensaje. Por otra parte, la capa con id "textomovimiento" es donde vamos a ir escribiendo el texto letra a letra. En un principio está vacía y tiene definido como color del texto el valor #cc0000.

El código Javascript para escribir la capa es exactamente el mismo que en el artículo anterior:

//variable con el texto a mostrar
var texto = "Bienvenidos a mi pagina web!!!"
//variable con la posicion en el texto. Inicializar siempre a 0
var pos = 0

function dame_texto(){
    //incremento la posicion en 1 y extraigo el texto a mostrar en este momento.
    pos = pos + 1
    if (pos == texto.length){
     //si hemos llegado al final, volvemos la posición al principio
     pos = 0
     return texto
   }else{
    return texto.substring(0,pos)
   }
}

function anima_texto(){
    xInnerHtml('textomovimiento',dame_texto())
    setTimeout("anima_texto()",100)
}

Se puede ver el ejemplo en marcha en una página aparte.

Ejemplo 2 animación con cambio de color

Para complicar un poco más el ejercicio vamos a hacer un efecto de texto en movimiento donde cambie el color de las letras cada vez que se escriba el texto animado. Podemos ver el ejemplo en marcha en una página aparte

El ejercicio es parecido que el relatado en el artículo Animación DHTML de texto en una capa , lo único es que cada vez que se comienza a escribir el texto, se define su color.

Para conseguir colores de forma aleatoria vamos a utilizar una función creada en un taller de Javascript anterior: Generar un color aleatorio con Javascript. En ese artículo se ha definido y explicado la función que devuelve colores aleatorios, así que no la trataremos ahora.

La capa donde mostraremos el efecto de animación de texto es la siguiente:

<div id="textomovimiento" style="font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
</div>

Ahora, el código javascript será como sigue:

Se definen unas variables globales, igual que antes, aunque ahora también almacenamos la variable "micolor", que contendrá el color con el que se deba escribir el texto cada vez.

//variable con el texto a mostrar
var texto = "Bienvenidos a mi pagina web!!!"
//variable con la posicion en el texto. Inicializar siempre a 0
var pos = 0
//variable para almacenar el color actual
var micolor = dame_color_aleatorio()

Si nos fijamos, al declarar la variable "micolor" también se inicializa su contenido, haciendo una llamada a la función dame_color_aleatorio(), que devuelve un color elegido al azar.

También cambia la función anima_texto(), que ahora debe escribir el color del texto a colocar en la capa. Por supuesto, utilizará la variable "micolor", que es la que tiene el color que se desea utilizar.

function anima_texto(){
   xInnerHtml('textomovimiento','<font color=' + micolor + '>' + dame_texto() + '</font>')
   setTimeout("anima_texto()",100)
}

Por último, veremos los cambios en la función dame_texto(), que devuelve el texto que se tiene que escribir en cada momento en la página. En este caso, cuando se llega al final del texto a escribir, que antes simplemente poníamos a cero el contador "pos", ahora también vamos a cambiar el color almacenado en la variable "micolor", haciendo una llamada a la función dame_color_aleatorio().

El resto del ejercicio es parecido a lo que ya se ha visto para otros ejemplos. No obstante, lo escribimos a continuación para que se pueda ver por completo.

<html>
<head>
    <title>Crear una animación de texto sobre una capa</title>

<script type='text/javascript' src='../x/x_core.js'></script>
<script>

//variable con el texto a mostrar
var texto = "Bienvenidos a mi pagina web!!!"
//variable con la posicion en el texto. Inicializar siempre a 0
var pos = 0
//variable para almacenar el color actual
var micolor = dame_color_aleatorio()

function dame_texto(){
   //incremento la posicion en 1 y extraigo el texto a mostrar en este momento.
   pos = pos + 1
if (pos == texto.length){
      //si hemos llegado al final, volvemos la posición al principio
      pos = 0
      micolor = dame_color_aleatorio()
      return texto
   }else{
      return texto.substring(0,pos)
   }
}

function anima_texto(){
    xInnerHtml('textomovimiento','<font color=' + micolor + '>' + dame_texto() + '</font>')
    setTimeout("anima_texto()",100)
}

function aleatorio(inferior,superior){
    numPosibilidades = superior - inferior
    aleat = Math.random() * numPosibilidades
    aleat = Math.floor(aleat)
    return parseInt(inferior) + aleat
}

function dame_color_aleatorio(){
    hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
    color_aleatorio = "#";
    for (i=0;i<6;i++){
      posarray = aleatorio(0,hexadecimal.length)
      color_aleatorio += hexadecimal[posarray]
    }
   return color_aleatorio
}

</script>

</head>

<body onload="anima_texto()">

<div id="textomovimiento" style="font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
</div>

</body>
</html>

Para finalizar, podemos ver el ejemplo en marcha en una página aparte.