|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Capas - Scroll 1 - 1 - 2 - 3 - 4 - 5 - 6
Scroll 1 (II)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Planteamiento.-
Bueno, hemos decidido introducir el texto en una capa (que vamos a crear mediante un conjunto de etiquetas <DIV>...</DIV>), por lo que lo primero que deberemos hacer será presisamente eso, situando la capa en el BODY de nuestra página y posicionándola mediante CSSP:
Dentro de <HEAD>...</HEAD>
<style type="text/css">
.textos{padding-right:10px;width:280px;}
.contenido{position:absolute;top:50px;left:50px;width:300;height:280px;clip:rect(0,300,280,0);font-size:10px;font-family:Verdana,Helvetica;color:#091c5a;}
</style>
y dentro del <BODY>...</BODY>:
<div id="texto" class="contenido">
<p class="textos">
Scribe, sicut dico tibi: Primus frater, quem dedit mihi Dominus, fuit frater Bernardus,
qui primo incepit et complevit perfectissime perfectionem sancti evangelii distribuendo bona
sua omnia pauperibus.
</p>
....
</div>
Donde hemos posicionado la capa, le hemos dado unas medidas convenientes y hemos recortado la capa de acuerdo con ellas, para estar seguros de que el tamaño de la misma será el adecuado. Además, necesitaremos recurrir luego a la propiedad clip. También hemos definido en los estilos una clase para los párrafos de texto, con objeto de que el contenido textual se muestre adecuadamente dentro de la capa.
El efecto lo tenéis en esta ventana.
Si véis el código fuente de la misma podréis observar que, debido a la altura que le hemos dado a la capa, no se ve en pantalla todo el contenido textual.
Necesitamos pués hacer que el contenido no visible aparezca, y para ello vamos a seguir el siguiente razonamiento:
1) damos más altura a la capa:
| inicial | paso1 | |
 |
 |
2) Ahora se ve todo el texto. Vamos entonces a desplazar la capa hacia arriba, para que la parte inferior de la misma permanezca siempre en la misma posición:
| inicial | paso2 | |
 |
 |
3) Y por último, recortamos la capa de tal forma que eliminamos el exceso de altura superior, dejándola con la misma altura que inicialmente tenía:
| inicial | paso3 | |
|
 |
Esto es lo que vamos a hacer para scrolear la capa hacia arriba, con pasos de 5 pixels, y ejecutando el número de ellos necesario para que se vea todo el texto.
 |
 |