Contenido web deslizante con animación
Este script crea una capa auto-deslizante, que hace que el contenido esté siempre visible en la pantalla, aunque el usuario baje la ventana del navegador con la barra de desplazamiento vertical.
Este efecto es muy usado en la publicidad de algunas empresas, como por ejemplo, la ventana de publicidad que pone Geocities en las páginas que tiene alojadas.
En este ejemplo, la capa contiene solamente texto, pero se puede modificar e incluir alguna imagen o cualquier otra cosa que se pueda incluir en una capa.
Demo
El código es el siguiente:
Este efecto es muy usado en la publicidad de algunas empresas, como por ejemplo, la ventana de publicidad que pone Geocities en las páginas que tiene alojadas.
En este ejemplo, la capa contiene solamente texto, pero se puede modificar e incluir alguna imagen o cualquier otra cosa que se pueda incluir en una capa.
Demo
El código 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;">
<h2>Aquí va lel texto que deseas que se scrolee con la página</h2>
</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>
