Hoy mientras observaba unas fotografías de Japón en el NY Times del antes y después del Tsunami, me llamo mucho la atención el efecto utilizado para mostrar en un mismo espacio dos imágenes.
La idea es la siguiente, superponer dos imágenes de un mismo lugar, objeto o persona, y mostrar una sección distinta de cada imagen según deslicemos el slider.
Investigando un poco fui a dar con Before/After, un plugin jQuery gratuito, para lograr un efecto muy similar al visto en el sitio del NY Times.
Utilizar este plugin es muy simple, por un lado vamos a tener las dos imagenes:
<div id="container"> <div><img alt="before" src="before.jpg" width="600" height="366" /></div> <div><img alt="after" src="after.jpg" width="600" height="366" /></div> </div>
Finalmente iniciamos el plugin con el contenedor:
<script type="text/javascript">
$(function(){
$('#container').beforeAfter();
});
</script>
Si lo desean pueden ver algunas demostraciones de uso desde el sitio oficial del plugin.
Web: Before/After