Capa Deslizante

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.

El código es el siguiente:

<html>
<head>
<title>Efecto 1</title>

<body>

<div id="capa" style="position:absolute; left: 20 px; top: 0 px; width: 250 px; color: #555555 ;"> Aqui va el texto que quieras mostrar... </div>

var capa =
{
topMargin : 25 , //posicion inicial
ceiling : 55 , //pixels del efecto de amortiguacion
desplazaTime : 1200 , //tiempo en recorrer la distancia anterior
capaDiv : document.all ? document.all.capa :
(document.layers ? document.capa : document.getElementById('capa'))
}

window.setInterval("capa.coordenadas( )", 35)

capa.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 = Math.max( this.scrollTop + this.topMargin, this.ceiling );

if ( this.actualY != nuevoScrollTop )
{
if ( nuevoScrollTop != this.targetY )
{
this.targetY = nuevoScrollTop;
this.desplazaInit( );
}
this.desplaza( );
}
}

Continúa en la página siguiente

Usuarios que han visto este tema también han visto...

- Evitar el Reenvío de Formularios con JavaScript
- Precarga simple para página web
- Cambio de color al poner el cursor
- Seleccionar múltiples checkboxes al mismo tiempo
- Imágenes con efecto polaroid usando JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento