 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Autozoom de texto con Javascript
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.
26/6/03 - 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>
El ejercicio se puede ver en marcha en una página aparte.
+ 2 categorias relacionadas
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Juan Carlos Gámez*
Espacio Latino URL: http://www.espaciolatino.com Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en Scripts DHTML
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
