¿Cómo crear una animación para comparar el antes y el después de una foto?

JuxtaposeJS es una herramienta fantástica que nos permitirá comparar dos imágenes en forma interactiva a través del desplazamiento de una pequeña línea sobre una imagen. Es gratuito, es fácil de usar, funciona en dispositivos móviles y se puede insertar en cualquier web a través de un iFrame

Usos:

JuxtaposeJS es útil para prácticamente cualquier comparación de imágenes que necesitemos hacer, nuestra imaginación dirá cuándo utilizarla y cuando no.

Algunas temáticas donde es comúnmente utilizada:

• Fotografía: Comparación de calidades de fotos de cámaras fotográficas, lo que incluye cualquier dispositivo con cámara, entre ellos, dispositivos móviles.
• Mapas: Comparaciones de fotografías aéreas sobre un mismo lugar mostrando el avance y expansión de áreas urbanas, cultivos, deforestaciones, etc.
• Construcción: Comparación mostrando avances de obras, reformas, resultados de usos de materiales distintos en misma obra, etc.
• Antes y después: Comparaciones entre fotografías tomadas en distinto punto temporal pero desde el mismo ángulo. Se utiliza en cosmética, agricultura, química, entre otros.

Cómo funciona JuxtaposeJS?

La utilización de la herramienta es extremadamente fácil. Es necesario conocer la URL de las imágenes que deseamos comparar, las cuales pueden estar alojadas en DropBox, Google Drive, o en la plataforma de tu sitio.

Al ingresar a JuxtaposeJS encontraremos dos campos principales donde pegar la URL de cada una de las imágenes que deseemos comparar. Para cada imagen además es posible indicar un nombre y el crédito en caso de querer  mencionar la fuente de las imágenes.

En las opciones de la derecha encontraremos algo de configuración adicional como la posición inicial del Slider y otras.

Una vez que definimos la configuración, podemos hacer clic en "Update Preview" para obtener una vista previa del complemento a insertar. Para finalizar, simplemente hacemos clic en  "Publish" y así obtener el iFrame que luego podemos insertar en un sitio web. 

El siguiente video tutorial explica el funcionamiento de JuxtaposeJS y los pasos para insertarlo en un sitio creado con Medios CMS

Sobre JuxtaposeJS
La herramienta fue desarrollada por Alex Duner de la Universidad de Northwestern Knight para los creadores de contenidos de los laboratorios de dicha facultad. Se puede aportar al código informando cualquier problema en este link. O conocer el código fuente aquí. También es posible enviar consultas al siguiente correo support@knightlab.zendesk.com