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
Leo
13 años ago
La verdad es que es un gran efecto, sobre todo para el que retoque fotografías y pueda mostrar el antes y después de manera tan directa.
Yo descubrí el mismo efecto pero algo más pulido. También es cierto que un poco más trabajoso integrarlo:
http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery