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