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

Subiendo la capa y recortando por arriba.-

Llegados a este punto, ahora tenemos que ir subiendo la capa otros 5 pixels en cada paso, para que no se mueva la parte inferior de la misma. Esto lo hacemos accediendo a la propiedad top de la capa, disminuyéndola 5 pixels en cada llamada a la función recorta(). Para ello, definimos una variable global Y, que va a contener la TOP inicial de la capa:

    var Y=50;

Inicializamos esta propiedad:

    function iniciaValores()
   {
       document.all(capa).style.height="280";
       document.all(capa).style.top="50";
       document.all(capa).style.clipt="rect(0,300,280,0)";
    }

y subimos la capa 5 pixels en cada vuelta:

    function recorta(id)
    {
        paso+=5;
        H=parseInt(document.all(id).style.height);
        document.all(id).style.height=H+paso;
        Y=parseInt(document.all(id).style.top);
        document.all(id).style.top=(Y-paso);
        eval('document.all(id).style.clip="rect(0,300,'+(H+paso)+',0)"');
    }

Aquí tenéis el resultado.

Nos queda recortar la capa por arriba, para que el aspecto final sea el deseado. Para ello, y puesto que ya tenemos inicializada la propiedad clip, vamos adefinir una variable global nueva, valor, que va a valer el número de pixels que recortamos en cada vuelta (5 pixels), y vamos a modificar el valor de paso, relacionándolo con el de valor. La función recorta() nos queda:

     var paso=0, H=280, Y=50, valor;
     var capa="texto";

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

Y su resultado es éste.

Si os ha despistado la introducción de la variable valor, fijáos en que el código es prácticamente el mismo. Además, esta variable nos va a servir de mucho luego, cuando tengamos que desplazar la capa hacia abajo, ya que bastará cambiar el signo de la misma para obtener el resultado buscado.

Ahora tenemos que hacer dos cosas: animar la capa, para que el desplazamiento se produzca sólo al poner el cursor sobre el enlace, sin tener que pulsarlo sucesivamente, y poner unos límites al desplazamiento de la capa, para que no se nos salga de la pantalla.