JavaScript: efecto persiana de texto

Efecto persiana de texto

El script

Como funciona

<script language="JavaScript">
< !--
//Primero comprobamos el navegador
var mie =(navigator.appName.indexOf("Microsoft")>=0)
var txtAct="";
//txtAct: objeto global con la capa del scroll.
function vertical(primera, capa, sent, vel)
{
var dimen=0;
//Primera vez que se ejecuta, iniciar todo
if (primera)
    {
     txtAct = (mie)?document.all[capa]:document.layers[capa];
     txtAct.alto = (mie)?txtAct.offsetHeight:txtAct.clip.height;
     txtAct.clp = 0;
    if (mie)
        txtAct.sup = txtAct.style.posTop+txtAct.alto*sent
    else
        txtAct.sup = txtAct.top+txtAct.alto*sent;
    txtAct.incr = Math.round(txtAct.alto*vel/100);
    }
else
    {
    txtAct.clp += txtAct.incr;
    //La región de recorte no puede sr mas alta del 100%
    if (txtAct.clp > 100)
        txtAct.clp = 100;
    }
if (sent>0)
    dimen = txtAct.clp;
else
    dimen = 100 - txtAct.clp;
if (mie)
    {
    if (sent>0) //de Abajo hacia Arriba sent=1
        txtAct.style.clip = 'rect(auto, auto,'+ dimen+'%, auto)'
    else
        txtAct.style.clip = 'rect('+ dimen+'%, auto, auto, auto)'
    txtAct.style.posTop=
            Math.round(txtAct.sup - txtAct.alto*dimen/100);
    }
else
    {
    if(sent>0)
        txtAct.clip.bottom = Math.round(dimen*txtAct.alto/100);
    else
        txtAct.clip.top = Math.round(dimen*txtAct.alto/100);
txtAct.top = Math.round(txtAct.sup - txtAct.alto*dimen/100);
}
if (primera)
    verCapa(txtAct, true);
if (txtAct.clp < 100)
    setTimeout("vertical(false,' ',"+sent+","+txtAct.incr+")",                 txtAct.vel);
else
    txtAct.clp = -1;
}
//Muestra u oculta una capa
function verCapa(obj, sn)
{
var mostrar = (sn)?'block':'none';
var estado = (sn)?'visible':'hidden';
if (mie)
    {
     obj.style.display = mostrar;
     obj.style.visibility= estado;
    }
else
    obj.visibility = estado;
}
-->
< /script>

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 una capa (DIV) inicialmente cerrada (alto cero) que se va abriendo (altura creciente).
La función básica para este efecto es vertical() que lleva los siguientes argumentos:
primera: true para la primera vez que se ejecute
capa: id del objeto DIV con el texto a desplazar
sent: 0 de arriba-abajo, 1: de abajo-arriba
vel: rapidez del desplazamiento (0 a 100)

Un código aparentemente complejo pero que responde a una idea muy simple: ir aumentando la altura de la región de recorte de la capa que contiene al párrafo móvil, usando para ello un evento temporizador. Pero claro si sólo hacemos esto iríamos viendo como el párrafo va siendo descubierto pero sin sensación de movimiento. Es como si tapamos un texto con una hoja de papel y la vamos bajando poco a poco. ¿Como lograr que el párrafo se mueva? Centrémosnos en el scroll de abajo hacia arriba: usamos una región de recorte (CLIP) inicial estrecha, sólo se vé la primera línea; luego aumentamos el tamaño de esa región bajando su límite inferior y llevamos hacia arriba la posición vertical de la capa. Repetimos esto hasta que toda la capa sea visible. Veremos así como si el texto fuera moviéndose de abajo arriba.

Este script funciona bien en MSIE y en Netscape 4, no así en Netscape 6

La página

Como se usa

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 200px; top: 138px; background: #CCFF66; layer-background-color: #CCFF66; border: 1px none #000000; visibility: hidden">
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 a bajo o de abajo arriba. Existe otra forma de lograr este efecto usando capas anidadas, pero Netscape se lleva mal con los anidamientos de capas.</div>
< input type="button" name="Button" value="Arriba" onclick="vertical(true,'Layer1', 1, 2)">
< input type="button" name="Button" value="Abajo" onclick="vertical(true,'Layer1', 0,2)">

Coloca este código en la sección BODY de tu página. Los valores left y top situan la capa en la posición que quieras de la página. Width y height te sriven para las dimensiones ancho y alto del bloque DIV. Background te sirve para el color de fondo. Como alternativa puedes usar un estilo CSS.

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