Gracias a los sliders superpuestos podemos realizar la comparación de imágenes, con un antes y un después, mediante dos imágenes solapadas una encima de la otra. En este artículo te enseñaré 5 scripts para realizarlos fácilmente.

Comparación de Imágenes con Sliders

Para los diseñadores también puede resultar muy útil. Es una sencilla y extraordinaria  manera de mostrar cuánto afecta una técnica o una acción determinada, sobre una imagen original. Sobre todo aquellos que trabajan con Photoshop.




 

A continuación os voy a mostrar varias librerías de JavaScript que podréis utilizar para la comparación de imágenes.

1.- Twentytwenty

Comenzaremos por Twentytwenty una herramienta que facilita la comparación entre dos imágenes. Ésta funciona con jQuery y jquery.event.move. Es muy fácil de utilizar, además de ser responsive y funcional en todos los dispositivos.

Para usarla simplemente deberemos poner dos imágenes dentro de un contenedor, y luego llamar a la función twentytwenty() para el contenedor.

Ejemplo:

Y posteriormente:

2.- Before After

Con pocas líneas de código Html5, CSS3 y Javascript podréis crear comparadores de imágenes totalmente responsive. Funciona con cualquier tipo de resolución. Podéis ver una demo en Codepen.

3.- Juxtapose

Juxtapose es muy sencillo de utilizar, y al igual que los anteriores, funcionan en cualquier dispositivo.

 

Tooltips CSS animados para usar en tu web

 

Su funcionamiento es bien sencillo. Únicamente debemos indicarle dos imágenes (Foto o Gif), y después llamar al plugin con las opciones disponibles para realizar la comparación.

4.- Cocoen

Cocoen es muy sencillo de utilizar y nos permite desplazar el slider con el dedo gracias al evento jQuery-touch. Únicamente debemos de incluir las librerías de Jquery y JqueryTouch para que funcione correctamente.

Ejemplo:

5.- Image Comparison Slider

Finalizamos con este plugin de CodyHouse que nos permite realizar una comparación de imágenes con CSS3 y JQuery.

Para utilizar este plugin y ver una demo en funcionamiento deberás de acceder a su página web aquí.

Conclusión

Seguramente estos scripts de comparación de imágenes o saquen las castañas del fuego. Su implementación es realmente sencilla, y solo requieren de unas pocas líneas de código para llevarlas a cabo.

Ahora es cuestión tuya elegir el que mejor se adapte a tus necesidades.

 

Calificación de Lectores
[Total: 1 Media: 5]

1 thought on “5 Scripts de comparación de imágenes gratis

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar