5 secuencias de comandos de control deslizante de comparación de imágenes gratuitas

Los controles deslizantes superpuestos le permiten hacer comparaciones entre dos imágenes, generalmente un tipo de antes-después, con las dos imágenes superpuestas entre sí. El usuario puede arrastrar un deslizador que se puede manipular para mostrar menos de la imagen anterior y más de la imagen posterior, y viceversa.

Es la forma perfecta para ciertos escenarios, como ver los duros efectos de la atmósfera de Marte o cómo los paisajes de la ciudad cambian durante medio siglo.

Para los diseñadores, también es una gran manera de reflexionar sobre la cantidad de cambio que una técnica o enfoque tiene en una imagen original. Hay varias bibliotecas JS que puede usar con fines comparativos. Aquí hay 5 de ellos.

Veinte Veinte

Twentytwenty es una herramienta visual para que sea fácil notar las diferencias entre dos imágenes. Esta herramienta utiliza jQuery y jquery.event.move para funcionar. Es muy fácil de usar, simplemente apila dos imágenes en un contenedor, luego llama a twentytwenty(); para el contenedor.

Entonces:

 $ ("# contenedor"). twentytwenty (); 

Twentytwenty es sensible y funciona para todos los dispositivos, y si utiliza el marco de Foundation, esto funcionará de la caja.

Yuxtaponer

Juxtapose le ayuda a comparar dos elementos multimedia (fotos o GIF) y le permite resaltar el cambio entre las imágenes a lo largo del tiempo. Este plugin es fácil de usar y funciona en todos los dispositivos. Simplemente proporcione dos imágenes y luego llame al complemento con las opciones disponibles.

En las opciones, puede establecer la posición de inicio del control deslizante, configurarlo en posición vertical u horizontal, agregar etiquetas y créditos, animación y más.

Pruebe una demostración a continuación:

imgSlider

imgSlider es un plugin jQuery simple para hacer el control deslizante de comparación de imágenes. El uso es simple y fácil: después de incluir su JS y CSS, ajuste las imágenes en div con la clase left para la imagen anterior, y right clase right para la imagen posterior, luego .slider(); llamando a .slider(); . Las opciones del complemento incluyen establecer la posición inicial del control deslizante y agregar / mostrar instrucciones en el control deslizante.

Llamar al plugin:

 $ ('. slider'). slider (); 

Cocoen

Cocoen permite el contacto con el uso del evento jQuery-Touch. Es fácil de aplicar debido a una estructura HTML similar al plugin Twentytwenty . En la pila de scripts, además de jQuery, debe incluir la biblioteca jQuery Touch Event, junto con este complemento.

 $ (document) .ready (function () {$ ('. cocoen'). cocoen ();}); 

Pruebe una demostración a continuación:

Control deslizante de comparación de imágenes

CodyHouse hizo una demostración de un control deslizante de comparación de imágenes con CSS3, jQuery y algunos scripts para manejar el evento de arrastre y agregar soporte móvil. Puede seguir la explicación completa y las instrucciones de uso de este complemento aquí y ver la demostración aquí.

Pruebe una demostración a continuación:

Aquí hay 3 más:

Cato : otros complementos necesitan jQuery como dependencia, pero Cato no requiere dependencia para funcionar, por lo que es una biblioteca más liviana para los controles deslizantes de comparación de imágenes. El uso es fácil, solo incluya la biblioteca CSS y JS de Cato y siga su estructura HTML.

Hay opciones disponibles para aplicar en su control deslizante, que incluyen agregar información sobre herramientas, cambiar la dirección del control deslizante e incluso agregar efectos de filtro como sepia y escala de grises. Sin embargo, debe tener en cuenta que Cato actualmente solo tiene soporte para WebKit.

Antes Después - Esto es ligero, totalmente receptivo, y funciona en cualquier diseño y tamaño. Puedes ver las demostraciones en vivo en Codepen.

Control deslizante de comparación de video HTML5 : cuando otros desarrolladores intentan crear un control deslizante de comparación para las imágenes, Dudley Storey aplica el control deslizante al video. Para hacer el trabajo, utilizó el jQuery y solo unas pocas líneas de código. Vea la demostración en Codepen para ver la acción.