Ver Mensaje Individual
  #17 (permalink)  
Antiguo 17/12/2008, 09:45
Avatar de Panino5001
Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 7 meses
Puntos: 834
Respuesta: Movimiento Parallax

Probá así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>test</title>
<
style>
#externa{ width:600px; border:1px dashed #000; position:relative; overflow:hidden; height:150px}
#uno,#dos,#tres{ position:absolute;}

</style>
<
script>
function 
t(id){return document.getElementById(id);}
function 
getStyle(id,w3cProp,IEProp){
if(
window.getComputedStyle){
return 
document.defaultView.getComputedStyle(t(id),null). getPropertyValue(w3cProp);
}else if(
t(id).currentStyle){
return 
t(id).currentStyle[IEProp];
}else{
alert('No se encontró el estilo');
return 
null;
}
}
function 
mover(id,vel){
var 
p,m;
p=m=parseInt(getStyle('externa','width','width'));
setInterval(
function(){
if(
window.parar)return;
if(
p<=-t(id).offsetWidth)
p=m;
p-=vel;
t(id).style.left=p+'px';
},
10);
}
onload=function(){


mover('uno',.1)
mover('dos',.5)
mover('tres',1)

t('externa').onmouseover=function(){window.parar=;}
t('externa').onmouseout=function(){window.parar=0; }
}
</script>
</head>
<body>
<div id="externa">
<div id="uno"><img src="logotype1.png" width="388" height="237"></div>
<div id="dos"><img src="fondoverde.gif" width="1200" height="150"></div>
<div id="tres"><img src="nubes.png" width="1200" height="150"></div>
</div>
</body>
</html> 
Fijate ir variando las velocidades hasta que te quede como esperás

Última edición por Panino5001; 17/12/2008 a las 10:29