No entiendo bien por qué, pero si cargo la imagen en el documento el efecto arranca. (¿Estaré haciendo mal la precarga?).
Hice varias pruebas con diferentes imágenes y anduvo. A veces uno se ahoga en una gota de agua. De todas formas, de no haber posteado el tema, seguro no hubiese notado lo del caché.
En fin. Para los que se molestaron en probarlo, y pensaron
-"Este furoya está cada día peor" porque ya tenían cacheado el logo de los foros y les anduvo; les dejo otra versión. Que supongo ya corregida.
Código:
<html>
<head>
<title>IMAGEN CON OLAS.</title>
<style>
body{background:#000080; color:#FFFFFF}
#contenedor{position:relative; visibility:hidden}
</style>
<script language= "JavaScript">
var ruta = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif "; //de la imagen
var arriba = 0; //top
var izquierda = 50; //left
var velocidad = 60; //de la onda en ms
var alto, ancho;
var imagen;
var imagenes = "";
var estilos = "";
var capa1a = 0;
var capa2a = -5;
var capa3a = -10;
var capa4a = -15;
var capa5a = -20;
var capa1i = -50;
var capa2i = -45;
var capa3i = -40;
var capa4i = -35;
var capa5i = -30;
var onda = [(arriba),(arriba+1),(arriba+2),(arriba+3),(arriba+2),(arriba+1)];
var despl = 2;
function olas0(){
imagen = new Image();
imagen.src = ruta;
alto = imagen.height;
ancho = imagen.width;
for(i=0;i<6;i++){
imagenes+="<img src=\""+imagen.src+"\" id=\"imag"+i+"\">";
}
document.getElementById("contenedor").innerHTML = imagenes;
document.getElementById("contenedor").style.height = alto+"px";
setTimeout("olas1(); document.getElementById('contenedor').style.visibility = 'visible';" , 1000);
}
function olas1(){
document.getElementById("imag1").style.clip="rect(0 "+capa1a+" "+(alto-1)+" "+capa1i+")";
document.getElementById("imag2").style.clip="rect(0 "+capa2a+" "+(alto-2)+" "+capa2i+")";
document.getElementById("imag3").style.clip="rect(0 "+capa3a+" "+(alto-3)+" "+capa3i+")";
document.getElementById("imag4").style.clip="rect(0 "+capa4a+" "+(alto-2)+" "+capa4i+")";
document.getElementById("imag5").style.clip="rect(0 "+capa5a+" "+(alto-1)+" "+capa5i+")";
olas2();
}
function olas2(){
if(capa1i>ancho) despl = -2;
else if(capa1a<0) despl = 2;
capa1i += despl;
capa2i += despl;
capa3i += despl;
capa4i += despl;
capa5i += despl;
capa1a += despl;
capa2a += despl;
capa3a += despl;
capa4a += despl;
capa5a += despl;
setTimeout("olas1()", velocidad);
}
</script>
</head>
<body onload="setTimeout('olas0()',2000)">
<h2>Imagen con efecto de ondas "va-y-ven".</h2>
<script>
for(s=0;s<6;s++){
estilos += "#imag"+s+"{position:absolute; top:"+onda[s]+"px; left:"+izquierda+"px}";
};
document.write("<style>");
document.write(estilos);
document.write("</style>");
</script>
<div id="contenedor"><img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif " /></div>
<br />
</body>
</html>