En realidad no sería una transición, aunque fue el proyecto original. Describo primero el efecto: se trata de rotar una serie de imágenes haciendo que aparezcan "armándose" como si fuesen un rompecabezas, pieza por pieza, hasta completarse.
El problema es que usando la forma clásica de ficha de puzzle, ese dibujo se "pierde" contra el de las fotos con mucha linea y color, y en la transición da lo mismo que usemos cualquier forma irregular. De hecho, si lo hacemos con cuadrados que cambien de posición hasta que la nueva foto quede "armada", el efecto se ve mucho mejor. Y es más fácil de crear.
Pero aún podemos aprovechar la idea del puzzle.
Si armamos la foto sobre un fondo liso, y la desarmamos antes de hacer la siguiente, el efecto se entiende sin ninguna duda, porque la forma de las piezas se destaca sobre el color del fondo. Y también es muy fácil de crear, ya que ahora nos ahorramos el uso de los filtros de
IExplorer o las equivalencias que podamos hallar en otros navegadores.
Hay varias formas de hacerlo. Yo voy a proponer una muy sencilla, casi pavota, cómoda para destripar y estudiar, y que sea punto de partida de efectos más elaborados.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" =
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>TRANSICIÓN PUZZLE.</title>
<meta content="text/html"; charset="utf-8">
<script type=text/javascript>
var fichas0 = [];
var fichas1 = [];
var imagen = 0;
var visibilidad = "hidden";
var tiempo = 2000;
var saca;
var foto=new Array();
foto[0]=new Image();
foto[0].src="http://img851.imageshack.us/img851/9164/alejandrocarosella1.jpg";
foto[1]=new Image();
foto[1].src="http://img402.imageshack.us/img402/2165/mariagiuffra.jpg";
foto[2]=new Image();
foto[2].src="http://img153.imageshack.us/img153/2240/alfredobenavidezbedoya1.jpg";
foto[3]=new Image();
foto[3].src="http://img5.imageshack.us/img5/3530/santagbarraza.jpg";
foto[4]=new Image();
foto[4].src="http://img831.imageshack.us/img831/3487/migueldavila.jpg";
foto[5]=new Image();
foto[5].src="http://img62.imageshack.us/img62/5510/lorenzoamengual.jpg";
foto[6]=new Image();
foto[6].src="http://img233.imageshack.us/img233/8682/nadinasepulveda.jpg";
function inicio() {
if(visibilidad == "hidden"){
document.getElementById("cuadro").style.backgroundImage = "url("+ foto[imagen].src +")";
imagen = (imagen == 6) ? 0 : imagen+1;
}
for(f=0; f<63; f++){
fichas0[f] = fichas1[f] = f;
}
setTimeout(arma,tiempo);
}
function arma(){
var totFichas = fichas1.length;
document.title=totFichas+ " " +saca+ " " +fichas1;
document.getElementById("sombra").style.visibility = "visible";
//alert("total " + totFichas)
var ficha = Math.floor(Math.random() * totFichas);
//alert("elige "+ elige);
saca = fichas1.splice(ficha,1);
var elige = "pzl" + saca;
document.getElementById(""+ elige +"").style.visibility = visibilidad;
if((totFichas-1) > 0){
setTimeout(arma,200);
//alert("a arma");
}
else {
setTimeout(sinSombra,1000);
//alert("a sinSombra");
}
}
function sinSombra(){
fichas1 = fichas0;
document.getElementById("sombra").style.visibility = "hidden";
setTimeout(desarma,100);
//alert("a desarma");
}
function desarma() {
if(visibilidad == "hidden") {
visibilidad = "visible";
tiempo = 5000; /* milisegundos que muestra cada foto */
}
else {
visibilidad = "hidden";
tiempo = 1000;
}
//alert(visibilidad+ " " +tiempo);
setTimeout(inicio,500);
//alert("a inicio");
}
onload = inicio;
</script>
<style type=text/css>
body {background-color: olive;
}
h1 {font-size: 200%; color: white;
}
h3 {font-size: 150%; color: white;
}
p img {background-color: silver;
}
#cuadro {width: 640px; height: 480px; overflow:hidden; position: relative;
background-image: url(http://img851.imageshack.us/img851/9164/alejandrocarosella1.jpg);
border: 3px outset white;
}
#sombra {width: 720px; height: 560px; overflow:hidden; position: absolute;
top: -80px; left: -80px;
background-image: url(http://img84.imageshack.us/img84/6059/sombrapuzzle.gif);
}
#pzl0, #pzl1, #pzl2, #pzl3, #pzl4, #pzl5, #pzl6, #pzl7, #pzl8, #pzl9, #pzl10, #pzl11,
#pzl12, #pzl13, #pzl14, #pzl15, #pzl16, #pzl17, #pzl18, #pzl19, #pzl20, #pzl21, #pzl22,
#pzl23, #pzl24, #pzl25, #pzl26, #pzl27, #pzl28, #pzl29, #pzl30, #pzl31, #pzl32, #pzl33,
#pzl34, #pzl35, #pzl36, #pzl37, #pzl38, #pzl39, #pzl40, #pzl41, #pzl42, #pzl43, #pzl44,
#pzl45, #pzl46, #pzl47, #pzl48, #pzl49, #pzl50, #pzl51, #pzl52, #pzl53, #pzl54, #pzl55,
#pzl56, #pzl57, #pzl58, #pzl59, #pzl60, #pzl61, #pzl62 {position: absolute;
}
#pzl0 {top: -40px; left: -64px;
}
#pzl1 {top: -40px; left: 96px;
}
#pzl2 {top: -40px; left: 256px;
}
#pzl3 {top: -40px; left: 416px;
}
#pzl4 {top: -40px; left: 576px;
}
#pzl5 {top: 120px; left: -64px;
}
#pzl6 {top: 120px; left: 96px;
}
#pzl7 {top: 120px; left: 256px;
}
#pzl8 {top: 120px; left: 416px;
}
#pzl9 {top: 120px; left: 576px;
}
#pzl10 {top: 280px; left: -64px;
}
#pzl11 {top: 280px; left: 96px;
}
#pzl12 {top: 280px; left: 256px;
}
#pzl13 {top: 280px; left: 416px;
}
#pzl14 {top: 280px; left: 576px;
}
#pzl15 {top: 440px; left: -64px;
}
#pzl16 {top: 440px; left: 96px;
}
#pzl17 {top: 440px; left: 256px;
}
#pzl18 {top: 440px; left: 416px;
}
#pzl19 {top: 440px; left: 576px;
}
#pzl20 {top: -64px; left: 40px;
}
#pzl21 {top: -64px; left: 200px;
}
#pzl22 {top: -64px; left: 360px;
}
#pzl23 {top: -64px; left: 520px;
}
#pzl24 {top: 96px; left: 40px;
}
#pzl25 {top: 96px; left: 200px;
}
#pzl26 {top: 96px; left: 360px;
}
#pzl27 {top: 96px; left: 520px;
}
#pzl28 {top: 256px; left: 40px;
}
#pzl29 {top: 256px; left: 200px;
}
#pzl30 {top: 256px; left: 360px;
}
#pzl31 {top: 256px; left: 520px;
}
#pzl32 {top: 416px; left: 40px;
}
#pzl33 {top: 416px; left: 200px;
}
#pzl34 {top: 416px; left: 360px;
}
#pzl35 {top: 416px; left: 520px;
}
#pzl36 {top: 16px; left: -40px;
}
#pzl37 {top: 16px; left: 120px;
}
#pzl38 {top: 16px; left: 280px;
}
#pzl39 {top: 16px; left: 440px;
}
#pzl40 {top: 16px; left: 600px;
}
#pzl41 {top: 176px; left: -40px;
}
#pzl42 {top: 176px; left: 120px;
}
#pzl43 {top: 176px; left: 280px;
}
#pzl44 {top: 176px; left: 440px;
}
#pzl45 {top: 176px; left: 600px;
}
#pzl46 {top: 336px; left: -40px;
}
#pzl47 {top: 336px; left: 120px;
}
#pzl48 {top: 336px; left: 280px;
}
#pzl49 {top: 336px; left: 440px;
}
#pzl50 {top: 336px; left: 600px;
}
#pzl51 {top: 40px; left: 16px;
}
#pzl52 {top: 40px; left: 176px;
}
#pzl53 {top: 40px; left: 336px;
}
#pzl54 {top: 40px; left: 496px;
}
#pzl55 {top: 200px; left: 16px;
}
#pzl56 {top: 200px; left: 176px;
}
#pzl57 {top: 200px; left: 336px;
}
#pzl58 {top: 200px; left: 496px;
}
#pzl59 {top: 360px; left: 16px;
}
#pzl60 {top: 360px; left: 176px;
}
#pzl61 {top: 360px; left: 336px;
}
#pzl62 {top: 360px; left: 496px;
}
</style> Sigue abajo