Fotogramas animados

Antes de que a nadie se le ocurriese siquiera la idea germen del cine, existían los fotogramas: empezaron con unos libritos que mostraban una imagen repetida mil veces, pero con sutiles cambios de postura en cada hoja: pasándolas rápido se veía algo así como una sola imagen en movimiento.

Pues es de ésto de lo que hablo: una ilusión cinematográfica que se acerca muchísimo al cine "de verdad". La demostración original es de Stu Nichols (quien tampoco da muchas pistas, precisamente) y mi resultado podéis verlo en el footer de
Mi Blog de Pruebas; sólo tenéis que pasar el ratón por encima de la imagen para que el caballo corra al galope.
El autor ha sacado las imágenes para esta animación de un artículo sobre fotogramas contenido en la Wilkipedia... cada quien puede poner las que guste (si es que las encuentra... que es difícil).

.- El CSS es sencillo, pero se complica extremadamente a causa de las inclusiones del autor para visualizar el hack en IE6, lo que da como resultado que se vea fabulosamente en Firefox, pero que no funcione para nada en IE7 (ya me contará alguien si realmente funciona para IE6... sólo me faltaba tener un tercer navegador, je).

Así queda:

<style type="text/css">

#frames table {border:0; padding:0; margin:0; border-collapse:collapse;}

#frames img {border:0;}

#frames ul {list-style-type:none; border:0; padding:0; margin:0;}

#frames {width:290px;height:270px; overflow:hidden; margin:20px 228px; position:relative; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSy1b7TgfE0Mbn2z-cv6KVjcgw9heJLinmT4yo4486_ue_LsKoRxKWY6-aN63gQjIrr2IS0LxTDU4nFVCYVSJ8n-2Z7Rch6jZYG2h7r5z7D64DqcX2hviaJzWCR7HCXen3B0T9kOUSwiU/s400/h1.jpg) 0 0;}

#start {width:580px;height:270px;position:relative; left:-291px; top:-271px}



</style>



<!--[if IE 7]><!-->

<style type="text/css">

#frames li {width:290px; height:270px; position:relative; float:left; left:290px;}

#frames li:hover{position:absolute;left:0;top:0;}

#frames a:hover {cursor:default;}

#frames a {cursor:default;}

</style>

<!--<![endif]-->



<!--[if lte IE 6]>

<style type="text/css">

#frames a {width:290px; height:270px; ;position:relative; left:290px; float:left; cursor:default;}

#frames a:hover{position:absolute;left:0;top:0; cursor:default;}

</style>

<![endif]-->





<style type="text/css">

#film table {border:0; padding:0; margin:0; border-collapse:collapse;}

#film img {border:0;}

#film ul {list-style-type:none; border:0; padding:0; margin:0;}

#film {width:130px;height:130px; overflow:hidden; margin:20px 310px; position:relative; background:#fff url(animation/b1.jpg) no-repeat;}

#begin {width:260px;height:130px; position:relative; left:-130px; top:-130px;}

</style>



<!--[if IE 7]><!-->

<style type="text/css">

#film li {width:130px; height:130px; position:relative; float:left; left:130px;}

#film li:hover{position:absolute;left:0;top:0;}

#film a:hover {cursor:default;}

#film a {cursor:default;}

</style>

<!--<![endif]-->



<!--[if lte IE 6]>

<style type="text/css">

#film a {width:130px; height:130px; position:relative; float:left; left:130px; cursor:default;}

#film a:hover{position:absolute;left:0;top:0; cursor:default;}

</style>

<![endif]-->

.- El HTML:

<div id='frames'>

<ul id='start'>

<li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSy1b7TgfE0Mbn2z-cv6KVjcgw9heJLinmT4yo4486_ue_LsKoRxKWY6-aN63gQjIrr2IS0LxTDU4nFVCYVSJ8n-2Z7Rch6jZYG2h7r5z7D64DqcX2hviaJzWCR7HCXen3B0T9kOUSwiU/s400/h1.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoydHmGc_VCXqZti5zSTqQmhCcKJa8_UpZNlhf3bUtP_QF3znaCLm045pOyJdH2Df9QgJaiib9ZSOVFVcpl2r0Yv_JNJ7uFGRH0mTeLTnIMOgIDMVNXj5rzzXAq1t4jafxgZZoMKgsKc/s400/h2.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOa8RytD85yGzE9Jorg6za-0COOr4SkGD5scnB9oc1S67GZch-8Zw2K8Qy3_3BFUlIIrqlX-KniEkYHhdw9pwpDK_-A6bSCWjc64rE_HWbTjzX5FgRz82hP4JodjeHOvc3oPtJ3KsrS6s/s400/h3.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPItFvwjgVX4nHoSzITezDr83qIQygoM-rPIY5NGYkrBPMQvmyibV9ykrfwSzoLXjed5k6scllDGvEVQdcU2q7LesMAJNaYG3cdJJ5BGYC3COLCbcoE2715bPHUbpm3s5XEb2LmOt1Jc/s400/h4.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis78vchJfQg64FO-RB1hfrFwJWbIB6S7d86yU_QroIs3Z22Ig50AQ_xdy7DEx3oq2HfzaK70tXyeRUBVXNVa8VJf6gGA5WFqBeZVaSwdNXiZMmkS72vLY34CzGKfXsOokEzwDJ33ZWHNA/s400/h5.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDvwBEBkYeaq8UPzTCiJ2JVA6T4G0tiDy4Yc1_ZgU7AmgFLA45BOf_2LGkbyf4N6tQKMpbwxmtfU3Bq4SG4ihJAzdTp1H1jrDWEH8Ba2IhRwpqZWC9kJ8DHKyHUf29KKcPxZBhd9MMIY/s400/h6.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_aqB7UMYB7czdIfhPo3NKjEoGOwoBchUAAXDNOXEhLrDC_F-cDXXdGWnVR5Dz_WasSjj6uvB6wkJB7-C7elMPb9nrrPDmLtSfebPkYBy0maOBxPjzJadLLHhiFhaC_WY91STffFBCFTo/s400/h7.jpg' title=''/><!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>

<ul><li><a href='#nogo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipljVcX9fiCG5ZPs9VoL8xUAAJWIl7VZL4KzYdwCM0dKeZpQON1Cujvv7CAEZwwyGPmvgxc7bHWMx6Ht_5nbR-q-FFdjNgzHcrF0C0rv-Ut9qw1V_FxJqWxRUwkF27Z2QqA5Zj6szTFtA/s400/h8.jpg' title=''/></a></li></ul>

</td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul>

</td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul>



</td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul>

</td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul>

</td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul>

</td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul>

</td></tr></table><!--[if lte IE 6]></a><![endif]--></li>

</ul>

</div>

</div>

Una advertencia: el fondo está concebido en claro... de manera que si lo usáis en una plantilla oscura, os vais a encontrar con que queda fatal el fotograma en cuestión. La misma facultad de reformar el código os asiste si queréis recortar el div que lo contiene: os llevará vuestro tiempo ajustar a éste las imágenes. En fín: cuestión de paciencia, para variar...