BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Antes y después en fotografías con TwentyTwenty para jQuery

31/MAY/2016 2.069 visitas Ver comentarios
Antes y después en fotografías con TwentyTwenty para jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Habitualmente en algunas páginas necesitamos mostrar un antes y un después de determinadas fotografías para destacar el logro conseguido sobre la imagen original.

Este logro puede ser en base a un retoque fotográfico (paisajes, fotos antiguas, etc...) o una operación médica, cirugía o, incluso, un taller mecánico o lavado de coches para mostrar una reparación, una limpieza, etc... Pensándolo así, se me vienen miles de posibles aplicaciones de este particular efecto.

Magia no tiene, se basa en utilizar dos fotografías tomadas con iguales características y aplicadas en nuestra página web dentro de un divisor contenedor... Al aplicar el plugin, éste se ocupará de superponer ambas imágenes y mostrar mediante la propiedad CLIP de CSS3, lo que permitirá mostrar el trozo de imagen que corresponde según la posición de la barrera separadora que podremos desplazar ya sea hacia la izquierda o derecha (también puede configurarse para desplazarse verticalmente).

Entre sus principales características nos encontramos que:

  • Es totalmente responsive, es decir, funciona perfectamente en navegadores de dispositivos móviles (yo lo he probado en mi Android).
  • No requiere imágenes extra para funcionar.
  • Importante: Requiere la librería jquery event move para funcionar (ya viene incluida en la descarga).

Pues nada, si te interesa mostrar un antes y un después de tus fotografías muy sencillo y agradable, no te pierdas este plugin.

Fuente: http://zurb.com/playground/twentytwenty

Código 1 - HTML
<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>
Código 2 - JAVASCRIPT
$(window).load(function() {
  $("#container1").twentytwenty();
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018