Animación DHTML de texto en una capa

25/5/05 - Vamos a ver un ejemplo de script en Javascript que nos servirá para hacer una sencilla animación de texto en una capa, basada en escribir una frase letra a letra.

El script hace uso de las librerías X-Library, que ofrecen un juego de funciones para trabajo con capas Cross Browser, es decir, compatibles con todos los navegadores. Podemos ver más información sobre esto en nuestro manual Cross-Browser

El ejemplo es bastante simple. No obstante, sería interesante verlo en marcha para hacernos una idea exacta de nuestro objetivo en este artículo.

La capa con el texto a animar

El texto que va a moverse se debe colocar en una capa independiente. En principio en la capa habrá un texto vacío, porque no hay nada que mostrar en un principio. El código de la capa será el siguiente:

< div id="textomovimiento" style="font-size:14pt;">
</div>

Simplemente le hemos asociado un identificador a la capa para referirnos a ella desde nuestros scripts DHTML.

Script para hacer la animación paso a paso

Podemos separar en dos partes las tareas necesarias para dar vida al texto. Una en la que se obtiene un texto letra a letra y otra en la que se escribe ese texto en una capa.

Para obtener un texto letra a letra y realizar el bucle para que se muestre el texto poco a poco, utilizamos la técnica parecida a la que se explicó en el artículo Texto en movimiento en la barra de estado, por lo que puede ser buena idea echar un vistazo al artículo.

El script para obtener un texto

En definitiva, lo que se hace es crear una variable con el texto a mostrar y otra que guarda la posición sobre la que estamos situados dentro de la cadena de texto a animar. En cada paso de la animación se incrementará esa posición, de modo que el texto a mostrar será cada vez mayor.

Las dos variables con el texto y la posición se definen de manera global, para que estén disponibles en cualquier sitio y sus valores no se pierdan entre las distintas ejecuciones de la función:

//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

Para conocer la porción de texto a mostrar en cada momento se ha definido una función Javascript que devuelve el texto actual. Esta función también se encarga de incrementar la variable "pos" (que guarda la posición actual) en cada ejecución de la función. Cuando "pos" llega al final del texto, se vuelve al principio asignando el valor cero.

function dame_texto(){
    //incremento la posición 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)
  }
}

Función xInnerHtml()

Esta función está definida en las librerías X-Library y sirve para modificar el código HTML que hay dentro de una capa. Simplemente recibe la capa a sustituir su código HTML y el nuevo código en un string.

Esta función la utilizaremos para ir modificando el texto de la capa en cada momento y de ese modo, ir generando la animación de texto.

Función que genera la animación

Para generar un movimiento en el texto vamos a utilizar una función que se encarga de modificar el texto de la capa y de llamarse a si misma pasados unos instantes. A través de las distintas llamadas a la función y modificando el texto a mostrar es como se crea el efecto de movimiento del texto.

La función es extremadamente sencilla, simplemente modifica el texto de la capa con la función xInnerHtml(). Para extraer el texto en cada momento simplemente llama a la función dame_texto() explicada anteriormente.

Para hacer el retardo entre las distintas llamadas a la función se utiliza el método setTimeout() de Javascript, que recibe la instrucción a ejecutar y el tiempo en milisegundos que debe esperar para ejecutar la instrucción. La instrucción en si es la llamada a la misma función anima_texto(). Con las distintas llamadas a esta función es como se genera la animación.

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

Código completo

Para ver el ejemplo completo incluimos a continuación todo su código:

<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

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)
}

</script>

</head>

<body onload="anima_texto()">

<div id="textomovimiento" style="font-size:14pt;">
</div>

</body>
</html>

Podemos ver el ejemplo en movimiento en una página aparte.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba