Continuando con la batalla perdida contra el Flash, batalla amistosa, voy a explicar como hacer un efecto de transición que suele usarse en las intros de las web.
El efecto muestra una imagen dividida en mosaicos haciendo que estos emergen en la pantalla. Está claro que con Flash se pueden hacer mil cosas dentro de la misma animación, pero este efecto no ocupa casi nada y con cambiar ciertas variables, es aplicable a cualquier diseño que queráis.
La idea es sencilla, vamos a tener una capa que actúe como contenedor de otras capas. Esta capa tendrá como estilo imprescindible la posicion como relativa (position: relative), con esto conseguimos que esta capa quede "anclada" a la página. Las capas que se hayen dentro del contenedor deberán tener el estilo position: absolute para conseguir que todas las capas que se hayan dentro se superpongan unas a otras. El valor absolute es siempre relativo al bloque que la contenga, no al documento, solo será relativo al documento, cuando no esté dentro de otro bloque que tenga el valor relative en propiedad position.
Dentro del contenedor debe haber dos capas:
- una que sea la imagen, que irá debajo (o bien incluyéndola antes en el documento HTML, o bien usando la propiedad z-index)
- otra capa que contenga los mosaicos que son los que tapan inicialmente la imagen y que luego van desapareciendo para mostrar la imagen
Veamos lo que se necesita para crear este efecto.
Hemos hablado ya de las capas DIV, estas serían junto a sus estilos:
<STYLE> ... div#contenedor { position: relative; /* Debe tener el tamaño de la imagen */ width: 500px; height: 250px; border: 1px solid #315C7C; } div#imagen { position: absolute; top: 0px; left: 0px; } div#contImagen { position: absolute; top: 0px; left: 0px; } ... </STYLE> ... <BODY onload="creaDIVs(); empiezaAnimacion();"> ... <div id="contenedor"> <div id="contImagen"></div> <div id="imagen"></div> </div> ... </BODY>
Y ahora veamos el código Javascript que necesitamos, estará formado por unas variables globales que se usarán para que sea fácil de configurar, y también estará formado por una serie de funciones.Las variables globales son las siguiente:
// El tamaño total de la imágen var anchoTotal = 500; var altoTotal = 250; // Longitud del lado del mosaico // (se supone que es cuadrado) var longLado = 50; // Cuánto se va a ir reduciendo el mosaico cada vez var indiceReduccion = 5; // Cada cuántos milisegundos se va a realizar // la reducción del mosaico var velocidadReduccion = 70; // Cada cuanto se empieza con un nuevo mosaico var velocidadGeneral = 40; // La URL de la imágen, // puede ser externa a nuestro servidor var urlImagen="lapiceros.jpg"; // Un array con todos los ids de los mosaicos var divIds = new Array();
// Crea la capa de mosaicos // Calcula cuantos mosaicos tiene que haber // vertical y horizontalmente y los crea // y va añadiendo a el contenedor de mosaicos function creaDIVs() { var contenedor = document.getElementById("contenedor"); // Dividimos en contenedor en mosaicos, //los creamos y los vamos añadiendo for (var i=0; i<altoTotal/longLado; i++) { for (var j=0; j<anchoTotal/longLado; j++) { // Creamos 4 capas por cada mosaico var div0 = dameDIV(i, j, 0); contenedor.appendChild(div0); var div1 = dameDIV(i, j, 1); contenedor.appendChild(div1); var div2 = dameDIV(i, j, 2); contenedor.appendChild(div2); var div3 = dameDIV(i, j, 3); contenedor.appendChild(div3); // Almacenamos el id del mosaico divIds[divIds.length] = div0.id.substring( 0, div0.id.length-2); } } // Ahora añadimos la imagen a su contenedor, // para evitar que primero se cargue la imagen y // luego aparezcan los mosaicos var img = document.createElement("IMG"); img.src=urlImagen; img.id = "imagen"; document.getElementById("contImagen").appendChild(img); } // Crea una nueva capa para un mosaico function dameDIV(i, j, n) { var div = document.createElement("DIV"); div.id = "div"+i+"-"+j+"_"+n; div.style.position = "absolute"; div.style.top = i*longLado+"px"; div.style.left = j*longLado+"px"; div.style.backgroundColor = "#315C7C"; div.style.width = longLado+"px"; div.style.height = longLado+"px"; div.style.clip = "rect( auto auto auto auto )"; div.setAttribute("porc", "100"); return div; } // Modifica un mosaico, la unión de las cuatro capas, // una cantidad para así ir dando el efecto de despliegue function despliega(id) { var porc = document.getElementById(id+ "_0").getAttribute("porc"); if (porc != "0") { var obj = document.getElementById(id+"_0"); var nuevoPorc = parseInt(porc)-indiceReduccion; // Se despliega de izq a der obj.style.clip = "rect(auto "+(nuevoPorc)+ "px auto auto)"; obj.setAttribute("porc", nuevoPorc); var obj = document.getElementById(id+"_1"); // Se despliega de der a izq var nuevoPorc = parseInt(porc)-10; obj.style.clip = "rect(auto auto auto " +(longLado-nuevoPorc)+"px)"; obj.setAttribute("porc", nuevoPorc); var obj = document.getElementById(id+"_2"); // Se despliega de arriba a abajo var nuevoPorc = parseInt(porc)-10; obj.style.clip = "rect("+(longLado-nuevoPorc)+ "px auto auto auto)"; obj.setAttribute("porc", nuevoPorc); var obj = document.getElementById(id+"_3"); // Se despliega de abajo a arriba var nuevoPorc = parseInt(porc)-10; obj.style.clip = "rect(auto auto "+ (nuevoPorc)+"px auto)"; obj.setAttribute("porc", nuevoPorc); // Continuamos con el proceso setTimeout("despliega('"+id+"')", velocidadReduccion); } } // Elije un mosaico al azar de los que quedan // sin desplegar y lo anima function animar() { if (divIds.length > 0) { // Elije uno al azar var pos = parseInt(divIds.length*Math.random()); despliega(divIds[pos]); // Borra de la lista el que se acaba de // desplegar para que no se repita var aux = new Array(); for (var i=0; i<divIds.length; i++) { if (pos != i) { aux[aux.length] = divIds[i]; } } divIds = aux; // Continuamos con el proceso setTimeout("animar()", velocidadGeneral); } } // Antes de que se empiece hay que // comprobar que la imagen se ha cargado function empiezaAnimacion() { var img = document.getElementById("imagen"); if (!img.complete) { setTimeout("empiezaAnimacion()", 100); } else { animar(); } }
Un ejemplo se puede encontrar aquí: ARCHIVO ZIPescrito por Luis a las 2/05/2006 01:23:00 a. m.
ATOM
1 Comentarios:
Hola traté de revisar el archivo zip, pero no aparece, sería bueno que lo pusieras para darle un vistazo..!!
Gracias por aportar sin pedir nada a cambio..
Saludos.
Por
Pixel G, a las 1/05/2009 07:10:00 p. m.
Publicar un comentario
<< Inicio