Scroll 1 (V)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Animando la capa y poniendo límites.-

Para animar la capa vamos a hacer que la función recorta() se llame a sí misma, usando para ello el método setTimeout. Para ello, y como la función recorta como la tenemos actualmente precisa un argumento (el ID de la capa a recortar), podemos hacer dos cosas:

1) Llamar a setTimeout usando el método eval, con lo que podemos pasarle a recorta() el mismo identificador que ha recibido.

2) Usar la variable global capa, que ya tenemos definida y que contiene el ID de la capa a recortar.

Vamos a usar este método, ya que es más simple y claro. La función recorta nos queda entonces:

    function recorta()
    {
        valor=5;
        paso+=valor;
        H=parseInt(document.all(capa).style.height);
        document.all(capa).style.height=(H+valor);
        Y=parseInt(document.all(capa).style.top);
        document.all(capa).style.top=(Y-valor);
        eval("document.all['"+capa+"'].style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
        tiempo=setTimeout("recorta()",50);
    }

y su resultado lo tenéis aquí.

Como véis, funciona bien, pero la capa sube indefinidamente y se pierde de vista, cosa que no queremos. Vamos pués a ponerle unos límites de actuación a la función recorta(), dependiendo de hasta dónde queremos que se mueva.

Este límite conviene que sea tal que la capa se scrolee lo suficiente para mostrar el texto que contiene, y entonces se pare. Como no sabemos en general cuánto texto va a contener la capa, vamos a definir una nueva variable global, altura, que va a fijar la posición superior mínima hasta la que se puede mover la capa. Tened en cuenta que aunque el contenido superior no se vea, al estar la capa recortada, sí que existe. En nuestro caso vamos a fijarla a -50 pixels, y el código necesario nos queda:

    var paso=0, H=280, Y=50, valor;
    var capa="texto";
    var altura=-50;
    function recorta()
    {
       if(Y>altura)
       {
           valor=5;
           paso+=valor;
           Y=parseInt(document.all[capa].style.top);
           H=parseInt(document.all[capa].style.height);
           document.all[capa].style.top = Y-valor;
           document.all[capa].style.height = H+valor;
           eval("document.all['"+capa+"'].style.clip='rect("+paso+",300,"+(H+valor)+",0)'");
           tiempo=setTimeout("recorta()",50);
       }
    }

cuyo resultado es éste.

Como véis, hemos establecido que la capa se mueva sólo si el valor de su propiedad TOP (almacenada en la variable Y) es mayor que la fijada en altura, -50 pixels.

Una vez conseguida la animación correcta, vamos ahora a permitir al usuario scrolear la capa hacia abajo.