Efecto persiana de texto

Una persiana de texto es un bloque de texto que se va a mostrar gradualmente, linea a linea, de arriba abajo o de abajo arriba.

El sentido del desplazamiento se controla con dos botones.

Se usan temporizadores y bloques con posicionamientos relativos y absolutos.

Solución

<script>

   var timer=null;

   function vertical(capa, incr, vel){

      var txt = document.getElementById(capa);

      var limVer, repetir;

      var posAct = txt.offsetTop+incr ;

      clearTimeout(timer);

      txt.style.top = posAct+"px";

      //arriba: incr < 0

      if(incr<0){

         repetir = posAct > -txt.offsetHeight;

      }

      else{

         repetir = posAct < txt.parentElement.offsetHeight;

      }

   if (!repetir){

      var reini = incr>0?-txt.offsetHeight:txt.parentElement.offsetHeight

      txt.style.top = reini+"px";

      }

      timer=setTimeout(vertical, vel, capa, incr, vel);

}

//Muestra u oculta una capa

function verCapa(obj, sn){

   var mostrar = (sn)?'block':'none';

   var estado = (sn)?'visible':'hidden';

   obj.style.display = mostrar;

   obj.style.visibility= estado;

}

</script>

<style>

#ventana{position:relative; width:200px; height:115px; padding: 10px; margin-bottom:10px; overflow:hidden}

#ventana div{position:absolute}

</style>

 

<body>

<div id="ventana">

<div id="texto">

Este es el texto que queremos ver desplazándose y con los botones de arriba podemos hacer que el párrafo vaya apareciendo de arriba abajo o de abajo arriba. Se usan anidamientos de bloques.</div>

</div>

<input type="button" name="Button" value="Arriba" onclick="vertical('texto', -1, 20)">

<input type="button" name="Button" value="Abajo" onclick="vertical('texto', 1, 20)">

</body>

Explicación

Este script sirve para que mostrar un texto de forma gradual en tu página. El texto se verá apareciendo como una persiana que baja o sube.

El funcionamiento se basa en el uso de dos bloques o capas:

  • ventana contenedora a través de la que vemos el texto
  • bloque con el texto que sube o baja

El bloque de texto tiene posicionamiento absoluto dentro de la ventana, que a su vez debe tener posicionamiento relativo y overflow en hidden, para que el texto no se ve fuera de la ventan. Esto lo tienes definido en el apartado style

La función básica para este efecto es vertical() que lleva los siguientes parámteros:

  • capa: id del bloque que hace de ventana
  • incr: incremento pra el movimiento 1 de arriba-abajo, -1: de abajo-arriba
  • vel: Indicador para la lentitud del desplazamiento

La idea es usar un temporizador (definido como global: timer) que llama a la función vertical() a intervalos dados por el parámetro vel.

En cada ejecución de vertical() se aumenta (incr>0) o disminuye (incr<0) la posición vertical del bloque del texto.

Cuando el texto ha terminado de pasar por la ventana, se reinicia su posición: Si está bajando se pone por encima de la ventana y si está subiendo se pone debajo de la ventana..

En cada ejecución de la función se reinicia el timer (temporizador). Esto se hace para cambiar el sentido del movimiento al pulsar los botones de arriba o abajo.

Este código puede servirte como base para un sistema de diapositivas o carrusel.

Como lo uso

Coloca el script y el style en la sección head.

En el cuerpo necesitas un bloque que contiene al que se va a despazar.

En la definición de estilos puedes modificar las características del blqoue contenedor (ventana) y del que contiien al texto.

Los botones puedes personalizarlos pero no olvides colocarle los eventos onclick para que hagan desplazarse el texto.

En los eventos defines el incremento que quieres para el movimiento del bloque y el parámetro que marca la lentitud del movimiento (a mayor valor, mas tarda en actualizarse la posición del bloque)