Viene de arriba
Código HTML:
<body>
<h1>Transición <i>puzzle</i>.</h1>
<center>
<div id="cuadro">
<div id="sombra"></div>
<img id="pzl0" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="0">
<img id="pzl1" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="1">
<img id="pzl2" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="2">
<img id="pzl3" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="3">
<img id="pzl4" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="4">
<img id="pzl5" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="5">
<img id="pzl6" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="6">
<img id="pzl7" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="7">
<img id="pzl8" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="8">
<img id="pzl9" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="9">
<img id="pzl10" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="10">
<img id="pzl11" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="11">
<img id="pzl12" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="12">
<img id="pzl13" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="13">
<img id="pzl14" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="14">
<img id="pzl15" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="15">
<img id="pzl16" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="16">
<img id="pzl17" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="17">
<img id="pzl18" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="18">
<img id="pzl19" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="19">
<img id="pzl20" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="20">
<img id="pzl21" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="21">
<img id="pzl22" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="22">
<img id="pzl23" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="23">
<img id="pzl24" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="24">
<img id="pzl25" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="25">
<img id="pzl26" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="26">
<img id="pzl27" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="27">
<img id="pzl28" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="28">
<img id="pzl29" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="29">
<img id="pzl30" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="30">
<img id="pzl31" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="31">
<img id="pzl32" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="32">
<img id="pzl33" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="33">
<img id="pzl34" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="34">
<img id="pzl35" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="35">
<img id="pzl36" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="36">
<img id="pzl37" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="37">
<img id="pzl38" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="38">
<img id="pzl39" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="39">
<img id="pzl40" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="40">
<img id="pzl41" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="41">
<img id="pzl42" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="42">
<img id="pzl43" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="43">
<img id="pzl44" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="44">
<img id="pzl45" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="45">
<img id="pzl46" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="46">
<img id="pzl47" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="47">
<img id="pzl48" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="48">
<img id="pzl49" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="49">
<img id="pzl50" src="http://img830.imageshack.us/img830/8478/puzzlev.gif" title="50">
<img id="pzl51" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="51">
<img id="pzl52" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="52">
<img id="pzl53" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="53">
<img id="pzl54" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="54">
<img id="pzl55" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="55">
<img id="pzl56" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="56">
<img id="pzl57" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="57">
<img id="pzl58" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="58">
<img id="pzl59" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="59">
<img id="pzl60" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="60">
<img id="pzl61" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="61">
<img id="pzl62" src="http://img197.imageshack.us/img197/2369/puzzleh.gif" title="62">
</div>
</center>
<h3>Imágenes : </h3>
<p>
<img src="http://img197.imageshack.us/img197/2369/puzzleh.gif">
<img src="http://img84.imageshack.us/img84/6059/sombrapuzzle.gif">
<img src="http://img830.imageshack.us/img830/8478/puzzlev.gif">
<br>
<img width=150 src="http://img5.imageshack.us/img5/3530/santagbarraza.jpg">
<img width=150 src="http://img402.imageshack.us/img402/2165/mariagiuffra.jpg">
<img width=150 src="http://img153.imageshack.us/img153/2240/alfredobenavidezbedoya1.jpg">
<img width=150 src="http://img851.imageshack.us/img851/9164/alejandrocarosella1.jpg">
<img width=150 src="http://img831.imageshack.us/img831/3487/migueldavila.jpg">
<img width=150 src="http://img233.imageshack.us/img233/8682/nadinasepulveda.jpg">
<img width=150 src="http://img62.imageshack.us/img62/5510/lorenzoamengual.jpg">
</p>
</body>
</html>
Como adivino esa sonrisa sobradora en vuestros rostros, hago algunas aclaraciones más.
El agregado de las sombras es apenas un adorno, Se vería mucho mejor haciéndolo en *.png, pero decidí usar *.gif por 2 motivos. En primer lugar, cuando hice el original de este efecto había navegadores que no mostraban el canal alfa (uno, bah), y todavía hoy puede que alguien lo quiera ver con
IE 6. El segundo es que no estamos en una cutandpastería, los códigos que ponemos tienen fines didácticos; y si alguno lo necesita se debe hacer su propia versión ¿Para qué me voy a molestar en mejorar una demo?
Por otro lado, ya sé que las fichas se pueden ubicar más fácil con un JS, y que podríamos ahorrarnos alguna función encadenada con
setTimeout. Pero me parece que así está más claro el armado y el mecanismo que hace la animación. Como dije recién : cada uno después lo mejora a su gusto.
Y hablando de mejoras, casi le agrego la pila de fichas a un costado, que se "vaciaba" a medida que la foto se "armaba", pero era una complicación innecesaria, no le agrega nada. Lo que sí estaría bien es el efecto de "Error" cada cierta cantidad de imágenes : poner dos piezas fuera de lugar, como si el escript se hubiera equivocado; y después de unos segundos las invierte, simulando que "descubrió" su yerro. Ya hablamos de filtros y de métodos para restar colores y capas; va a dar mucho tarbajo, pero si alguien lo quiere hacer me parece que puede quedar simpático.
Por último, esta transición tiene un uso muy acotado, como el álbum de fotos del bebé o las gracias de la mascota. Ni se les ocurra ponerlo en un curriculum vitae o una presentación para la junta del directorio ... porque los van a mirar con caras muy serias.
Imágenes : 
▒
▒
▒
▒
▒
▒