Texto Creciente: efecto zoom

Un efecto donde el tamaño del texto dentro de un bloque aumenta gradualmente a la velocidad que queramos

Este efecto se puede hacer con CSS, pero como aprendizaje no está mal usar Javascript,

Solución

<script>

function crecerTxt(idmarco, vel, mx)

{

   let tam, marco;

   marco = document.getElementById(idmarco);

   tam = parseInt(marco.style.fontSize);

   tam = isNaN(tam)?1:(tam+1);

   marco.style.fontSize = tam+"px";

   if (tam >= mx){

       clearInterval(marco.timer);

   }

   if(marco.timer==null){

       marco.timer = setInterval( function(){crecerTxt(idmarco,vel,mx)} );

   }

}

</script>

<body onload="crecerTxt('marco',5,50)">

<div id="marco" style="font-size:2px">Contenido ampliable</div>

</body>

Explicación

Al cargarse la página (o concualquier otro evento que quieras vincular) se llama a la función crecerTxt() con tres argumentos: el id del bloque donde se produce el efecto, la velocidad con que crece el texto y el tamaño máximo que debe alcanzar.

En la función se lee el bloque y se comprueba si tiene el atributo de tamaño de fuente. Si no lo tiene se inicia en 1, si lo tiene ese sería el tamaño actual.

Luego aumenta el tamaño de la fuente y le asigna el nuevo valor con el atributo style.fontSize.

Si no se ha iniciado el temporizador se inicia llmanado a setInterval() y se guarda en una propiedad de nombre timer que creamos en el objeto marco.

Cuando se alcance el valor máximo del tamaño se borra el temorizador almacenado en el objeto del marco (marco.timer).

Como lo uso

Dentro de la página colocas el bloque div al que quieres aplicar este efecto zoom. Si le pones un font-size en el atributo style ese será el tamaño con el que comenzará el efecto.

Luego en el evento load de body vinculas la función crecerTxt() con los argumentos: id del marco, rapidez y tamaño máximo.

También puedes vincular el efecto a otros eventos: un click, un mosuseover ...