|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTMLWebScript - Efectos
Capa auto-deslizante
por Luciano Moreno, del departamento de diseño web de BJS Software.
Este script crea una capa auto-deslizante, con lo que su contenido estará siempre visible en pantalla, aunque el usuario scrolée la ventana del navegador con la barra de desplazamiento vertical.
Es este un efecto curioso y muy usado, como podéis ver en las típicas ventanas publicitarias que pone geocities en las páginas que tiene alojadas. Nosotros hemos ampliado el efecto, introduciendo un factor de amortiguación, de tal forma que la capa se desplaza sin brusquedad.
Este script está basado en uno análogo que podéis encontrar en webreference, que hemos comentado, cambiado sus variables para la lengua hispana, simplificado y adaptado para su correcto funcionamiento en Nestcape Navigator 6x. Es por tanto cross-browser, es decir, vale para cualquier navegador de cuarta generación. Se puede situar dentro de la capa un texto, una imagen o un menú de navegación.
Por nuestra parte podéis usarlo en vuestras páginas, siempre que éstas no sean comerciales, en cuyo caso deberéis pedirnos permiso (nosotros se lo tendríamos que pedir a webreference).
El código necesario para la página es el siguiente:
<html>
<head>
<title>HTMLWeb
- WebScript - Capa deslizante</title>
<style
type='text/css'>
#capa {font-family:Verdana, Helvetica,
sans-serif; font-size:12px;}
</style>
</head>
<body>
<div id="capa" style="position:absolute;
left:20px; top:0px; width:250px; color:#555555;">Aquí va lel texto
que deseas que se scrolee con la página</div>
<script language="JavaScript"
type="text/javascript">
/**
*
definimos un objeto ocapa y sus propiedades. Observa como de define un nuevo
objeto, mediante
* un signo igual para abrir el parentesis
de sus propiedades y mediante : para definir cada una de
ellas
* var topMargin = posicion inicial superior de la
capa deslizante
* var
ceiling = pixels que se escrolea la capa con
amortiguacion
* var desplazaTime = tiempo que tarda la
capa en recorrer el espacio marcado por ceiling
* En la
ultima sentencia de declaracion asignamos un valor diferente a capaDiv para cada
navegador
*/
var ocapa =
{
topMargin : 25,
ceiling :
55,
desplazaTime :
1200,
capaDiv : document.all
? document.all.capa : //sigue en la siguiente
linea
(document.layers ?
document.capa : document.getElementById('capa'))
}
/**
* llamamos a la funcion
ocapa.coordenadas cada 35 milisegundos
*/
window.setInterval("ocapa.coordenadas( )",
35)
/**
* definimos la funcion ocapa.coordenadas, metodo del objeto ocapa, que obtiene
en cada paso
* las coordenadas de la capa y de la ventana
scroleada
* observa como se define un metodo propio de un
objeto, mediante la sintaxis
objeto.nombre_funcion=function()
* var actualY
= coordenada top de la capa en cada momento
* var
scrollTop = coordenada top de la ventana scroleada en cada
momento
*/
ocapa.coordenadas =
function( )
{
if(document.all)
{
this.actualY =
this.capaDiv.style.pixelTop;
this.scrollTop =
document.body.scrollTop;
}
else
if(document.layers)
{
this.actualY =
this.capaDiv.top;
this.scrollTop =
window.pageYOffset;
}
else
if(document.getElementById)
{
this.actualY =
parseInt(this.capaDiv.style.top);
this.scrollTop =
window.pageYOffset;
}
/**
* var nuevoScrollTop = maximo
valor de (coordenada de scroleo+la posicion definida como top
inicial
* de la capa) y distancia
necesaria para el scroleo
amortiguado
* Inicialmente hemos
establecido que la capa se scrolee de forma amortiguada desde su
* posicion inicial
superior, 20 px, a la marcada por la variable ceiling,
55px.
* lo que vamos a hacer es
que este efecto se mantenga en todo
caso
*/
var nuevoScrollTop =
Math.max( this.scrollTop + this.topMargin, this.ceiling
);
/**
* si escroleamos la ventana
>> llamamos a la funcion desplaza, para mover la
capa,
* siempre que no se supere
la posicion superior inicial de la misma, en cuyo caso llamamos
* a la funcion ocapa.desplazaInit
para iniciar de nuevo la secuencia
*/
if ( this.actualY !=
nuevoScrollTop )
{
if (
nuevoScrollTop != this.targetY )
{
this.targetY =
nuevoScrollTop;
this.desplazaInit(
);
}
this.desplaza( );
}
}
/**
* fin de la funcion
ocapa.coordenadas
*/
/**
* funcion para el desplazamiento inicial de la capa, antes de scrolear la
ventana
* var ahora = contiene la fecha actual
del ordenador del usuario
* usamos getTime para obtener un
tiempo en mlisegundos para definir el efecto de
amortiguamiento
* en el movimiento de la
capa
*/
ocapa.desplazaInit =
function( )
{
var ahora =
new Date( )
this.A = this.targetY - this.actualY ;
this.B =
Math.PI / ( 2 * this.desplazaTime );
this.C =
ahora.getTime( );
this.D = this.actualY;
}
/*
* fin de la funcion
desplazaInit
*/
/**
* funcion general de desplazamiento de la
capa
* usamos getTime para obtener un tiempo en
milisegundos para definir el efecto de amortiguamiento,
*
mediante la aplicacion de una funcion seno
* luego
asignamos como coordenada superior de la capa los valores hayados con esta
funcion
*/
ocapa.desplaza =
function( )
{
var ahora =
new Date( );
var nuevaY =
this.A * Math.sin( this.B * ( ahora.getTime( ) - this.C ) ) +
this.D;
nuevaY = Math.round( nuevaY
);
if
( ( this.A > 0 && nuevaY > this.actualY ) || ( this.A < 0
&& nuevaY < this.actualY ) )
{
if
(document.all)
this.capaDiv.style.pixelTop =
nuevaY;
else
if(document.layers)
this.capaDiv.top =
nuevaY;
else
if(document.getElementById)
this.capaDiv.style.top =
nuevaY;
}
}
/**
fin de la funcion
desplaza
*/
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Consideraciones:
1) Aplicamos diferente sintaxis de código para cada navegador, ya que cada uno de ellos maneja las capas de forma diferente. Para más informacisn, ver diferentes artículos de DHTML en este mismo portal. Distinguimos cada navegador preguntando por un objeto soportado por él (document.all para I. Explorer, document.layers para Nestcape 4x y document.getElementById para Nestcape 6x).
2) SetTimeout("funcion()", tiempo) es un método de JavaScript que llama a una función en un tiempo en milisegundos determinado.
3) En el caso de Nestcape 6x usamos el método parseInt(expresion) ya que si obtenemos la propiedad anchura (o left, top, height, clip) en este navegador el resultado es del tipo "345 px", valor de tipo string, por lo que no podemos operar con él como número entero. El método parseInt saca de esa cadena los primeros números, hasta encontrar la cadena "px".
4) Usamos la sintaxis general de construcción de objetos, en la que definimos sus propiedades y mitodos específicos.
Por lo demás creo que queda claro el código para aquellas personas con conocimientos suficientes de DHTML y JavaScript.
El resultado de este código podéis verlo pinchando aquí.
Eso es todo, amigos. Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Efectos