--- canonical_url: "https://blogdemedios.com/contenido/100240/compara-imagenes-con-juxtaposejs" title: "¿Cómo crear una animación para comparar el antes y el después de una foto?" article_type: "Article" description: "Crea una comparación interactiva de fotos o imágenes con JuxtaposeJS" main_image: "https://blogdemedios.com/download/multimedia.grande.861338243c74e843.636f6d7061726120696d6167656e5f6772616e64652e706e67.webp" date_published: "2016-12-12T15:42:00-03:00" date_modified: "2024-01-29T11:26:23-03:00" tags: - "Herramientas web" - "Periodismo digital" author_name: "Jeremías G. Ruiz" author_url: "https://blogdemedios.com/usuario/2/jeremias-g-ruiz" author_bio: "Emprendedor tecnológico, investigador independiente y estratega de medios digitales. CEO en Medios CMS y director de Blog de Medios, se especializa en la arquitectura de sistemas de contenidos y el análisis del ecosistema publicitario. Colaborador en sitios webs amigos donde aplica su enfoque técnico y crítico para analizar la ingeniería, eficiencia y tecnología." author_social_links: - "https://x.com/jeregruiz" - "http://www.linkedin.com/in/jeremias-g-ruiz" - "https://www.instagram.com/jeremiasgruiz/" - "http://youtube.com/jeremiasruiz" category_name: "Herramientas" category_url: "https://blogdemedios.com/categoria/7/herramientas" category_description: "Reseñas y comparativas de herramientas útiles para los medios digitales. Guías paso a paso sobre cómo utilizar herramientas específicas. Blogdemedios.com.ar" --- # ¿Cómo crear una animación para comparar el antes y el después de una foto? ![compara imagen con juxtaposeJS](/download/multimedia.normal.9b3984c316352540.636f6d7061726120696d6167656e5f6e6f726d616c2e706e67.webp) *Compara calidades de imágenes con JuxtaposeJS.* [JuxtaposeJS](https://juxtapose.knightlab.com/) 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](https://medios.com.ar/) **Sobre [JuxtaposeJS](https://juxtapose.knightlab.com/#create-new)** La herramienta fue desarrollada por [Alex Duner](http://www.twitter.com/asduner/) de la Universidad de Northwestern Knight para los [creadores de contenidos](/contenido/101599/como-escribir-contenido-optimizado-para-seo-utilizando-herramientas-de-escritura) de los laboratorios de dicha facultad. Se puede aportar al código informando cualquier problema en [este link](https://github.com/NUKnightLab/juxtapose/issues?q=is%3Aopen). O conocer el [código fuente aquí](https://github.com/NUKnightLab/juxtapose). También es posible enviar consultas al siguiente correo [support@knightlab.zendesk.com](mailto:support@knightlab.zendesk.com) --- *Contenido creado y optimizado para IA con [Medios CMS](https://medios.io)* — Plataforma profesional para la gestión de medios digitales y portales de noticias.