Ayuda con capa 2
Aquí va un ejemplo para que me entiendas..
http://www.terra.cl/finanzas/index.cfm?pag=inmobiliario&id_reg=360438
Mira el banner de la derecha al moverte por la página..
Chao
http://www.terra.cl/finanzas/index.cfm?pag=inmobiliario&id_reg=360438
Mira el banner de la derecha al moverte por la página..
Chao
1 Respuesta
Respuesta de manusoftar
1
Contestando a tu pregunta te envío el código fuente, es algo largo, pero...
Hace lo que querés:
El código es el siguiente:
<html>
<head>
<title>Efecto 1</title>
<style type='text/css'>
#capa {font-family:Arial; font-size:12px;}
</style>
</head>
<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>
<script language="JavaScript" type="text/javascript">
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( );
}
}
capa.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;
}
capa.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;
}
}
</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>
Al final del script puedes ver un montón de etiquetas iguales (<br>), esto es para provocar la aparición de la barra de desplazamiento y así poder ver el efecto. Si vas a usar este sript y la página tiene ya suficiente texto para que aparezca la barra de scroll puedes eliminar esas etiquetas.
Al inicio de la página decía que se podía sustituir el texto por una imagen. Si lo prefieres de esa forma solo tienes que modificar el texto escrito en negrita e incluir la ruta de la imagen. Debería quedar algo así:
<div id="capa" style="position:absolute; left:20px; top:0px; width:250px; color:#555555;"><img src="imagen.gif"></div>
Atentamente. Manuel Fernández.
Hace lo que querés:
El código es el siguiente:
<html>
<head>
<title>Efecto 1</title>
<style type='text/css'>
#capa {font-family:Arial; font-size:12px;}
</style>
</head>
<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>
<script language="JavaScript" type="text/javascript">
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( );
}
}
capa.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;
}
capa.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;
}
}
</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>
Al final del script puedes ver un montón de etiquetas iguales (<br>), esto es para provocar la aparición de la barra de desplazamiento y así poder ver el efecto. Si vas a usar este sript y la página tiene ya suficiente texto para que aparezca la barra de scroll puedes eliminar esas etiquetas.
Al inicio de la página decía que se podía sustituir el texto por una imagen. Si lo prefieres de esa forma solo tienes que modificar el texto escrito en negrita e incluir la ruta de la imagen. Debería quedar algo así:
<div id="capa" style="position:absolute; left:20px; top:0px; width:250px; color:#555555;"><img src="imagen.gif"></div>
Atentamente. Manuel Fernández.
Es que abriste dos veces la pregunta y una de ellas aún sigue activa.
Desde ya muchas gracias.
Cualquier otra duda sabés a quién consultar :)
Atentamente. Manuel Fernández.
Desde ya muchas gracias.
Cualquier otra duda sabés a quién consultar :)
Atentamente. Manuel Fernández.
