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){
let txt = document.getElementById(capa);
let limVer, repetir;
let 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){
let 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){
let mostrar = (sn)?'block':'none';
let 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 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 vea fuera de la ventana. 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 del desplazamiento >0 de arriba-abajo, <0: 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)
Como ves n el fondo lo que tiees esn bloque que hace de ventana para ver otro por debajo, que se mueve en vertical.