> Manuales > Prácticas Javascript marcadas como obsoletas

Este es un ejemplo de efecto de texto que se puede hacer en DHTML utilizando Javascript. El texto aumenta y reduce su tamaño automáticamente.

Este artículo explica cómo hacer una animación con Javascript de aumento del tamaño del texto pero este efecto hoy no es recomendable hacerlo con Javascript sino con CSS. Podría ser interesante desde un punto de vista didáctico, el aprender a realizar procesos de animación con setTimeout(), pero aún así se ha quedado un código antiguo y resulta poco claro en la lectura por lo que no lo recomendamos. Como el objetivo del efecto debería realizarse con animaciones css, no lo vamos a actualizar y lo dejamos coo prácticas obsoletas.

Este script hace que el tamaño de la letra de un banner de texto vaya creciendo hasta alcanzar un valor máximo predefinido.

El funcionamiento es bien sencillo, como cualquier animación en Javascript, necesitas un temporizador que cada cierto tiempo se dispara llamando a una función responsable del efecto de animación, en este caso modificar el tamaño de un texto. Esta función se llama creceLetra().

Al cargar la página se llama a la función resetear() que es la que inicia todos los valores: objeto al que se aplica el efecto (un elemento DIV), tamaño mínimo y máximo del texto y velocidad con la que crecerá. Esta función activa el temporizador que llama a creceLetra(), encargada de aumentar en 1 px el tamaño del texto actuando sobre la propiedad style.fontSize del objeto al que se aplica el efecto, y de reactivar el temporizador.

Así hasta que el texto alcance el tamaño máximo en cuyo caso vuelve a llamar a resetear() (esta vez sin argumentos) que repone el tamaño inicial y se repite el ciclo. Esta llamada se hace mediante un temporizador para mantener en pantalla el texto a tamaño grande durante un cierto tiempo (500 miliseg en el ejemplo).

El código Javascript

<script language="JavaScript">
var banZoom = null

function creceLetra()
{
var obj = banZoom
var tma
tma = parseInt(obj.style.fontSize)
window.status = obj.style.fontSize
if (tma<obj.maxTam)
    {
    obj.style.fontSize = tma + 1
    setTimeout("creceLetra("+obj.maxTam+")",20)
    }
else
    setTimeout("resetear()",500)

}

function resetear(mn, mx, rapidez, idBan)
{
if (banZoom == null)
    {
    banZoom = document.getElementById(idBan)
    banZoom.maxTam = mx
    banZoom.minTam = mn
    banZoom.rapidez = rapidez
    }
banZoom.style.fontSize = banZoom.minTam
setTimeout("creceLetra()",rapidez)
}
</script>


El código HTML

El evento onload se vincula a resetear() con los argumentos iniciales que son, por este orden, tamaño mínimo de las letras, tamaño máximo que deben alcanzar, rapidez con que crecerán y el identificador del elemento al que se aplica.

En este caso este elemento es un bloque DIV cuyo identificador ID es 'letras'. Este bloque DIV puedes diseñarlo como quieras en cuanto a colores, tipo de letra a usar, bordes, imagen de fondo...

<body onload="resetear(10, 48, 10, 'letras')">
<DIV id="letras" style="position:absolute; font-size:10px; height:56px; width: 761px; background-color: #CCFFCC;border: 1px none #000000;">Toda la frase va creciendo</DIV>
<p> </p>
<p> </p>
<p>Y qué pasa con el resto </p>
</body>

Juan Carlos Gámez

Espacio Latino

Manual