Flash sin flash: slide-in

Exactamente ¿de qué estoy hablando?... pues de un efecto Flash que descarga nuestras imágenes una por una (¡OJO!: las de todo el blog) y que resulta muy guapo para páginas principales, por ejemplo (será muy útil para Wordpress y para quien quiera tener una página con imágenes, de instroducción a su blog: Hoctro's Place tiene un hack para hacer una página de introducción al blog).

Podéis ver a qué me refiero con esod e la descarga "slide-in" de las imágenes en mi BLOG DE PRUEBAS

Vamos al código:

.- No he colocado ningún CSS especial, aunque en el haack original se incluye uno para bordear las imágenes y posicionarlas. Como afecta a todas las imágenes del blog, he preferido insertar un "style" con borde en cada imagen, una a una... para que no me aparezca el mismo ni en el perfil ni en otras imágenes del blog donde no quiera el borde. Este es el CSS del hack original:

img {
margin:5px;
border:solid 2px #fc0;
padding:5px;
background-color:#fff;
}

.- Scripts, qie colocaremos entre el cierre skin y el cierre head.

Antes de nada, una cosa: yo me he descargado la última versión de la librería Mootools, entera. Con todos los efectos y todos los módulos. De esa manera, no tengo que andar descargando módulos cada vez que un hack me lo requiere... así los tengo todos en el mismo script y me dejo de líos.

Así pues, necesitamos un script, amén del Mootools:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>

<script type='text/javascript'>

var SlideIn = {

start: function () {

var delay = 200;

$$(&#39;img&#39;).each(function (el) {

el.setStyles({

&#39;position&#39;: &#39;relative&#39;,

&#39;top&#39;: el.getParent().offsetTop - el.offsetTop,

&#39;left&#39;: el.getParent().offsetLeft - el.offsetLeft,

&#39;opacity&#39;: 0

});

var fx = el.effects({transition:Fx.Transitions.Back.easeOut});

fx.start.delay(delay, fx, {

&#39;opacity&#39;: 1,

&#39;top&#39;: 0,

&#39;left&#39;: 0

});

delay += 100;

});

}

};



window.addEvent(&#39;load&#39;, function () {

SlideIn.start();

$(&#39;startFx&#39;).addEvent(&#39;click&#39;, function (e){

new Event(e).stop();

SlideIn.start();

});

});

</script>

.- HTML:

<div>

<img src="slide1.jpg" /><img src="slide2.jpg" /><img src="slide4.jpg" /><img src="slide3.jpg" /><br />



<img src="slide1.jpg" /><img src="slide2.jpg" /><img src="slide4.jpg" /><img src="slide3.jpg" /><br />

<img src="slide1.jpg" /><img src="slide2.jpg" /><img src="slide4.jpg" /><img src="slide3.jpg" /><br />

<img src="slide1.jpg" /><img src="slide2.jpg" /><img src="slide4.jpg" /><img src="slide3.jpg" />

</div>

<a id="startFx" href="#">Activate Effect!</a><br />

Vía: chromasynthetic