Autozoom de texto con Javascript

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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

El código HTML

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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…


Toda la frase va creciendo

 

 

Y qué pasa con el resto

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies