5 secuencias de comandos de comparación de imagen libre
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 una sobre la otra. Un control deslizante que puede ser manipulado, puede ser arrastrado por el usuario para mostrar menos de la imagen anterior y más de la imagen posterior, y viceversa.
Es la manera perfecta para ciertos escenarios, como ver los duros efectos de la atmósfera de Marte o cómo cambian los paisajes de la ciudad durante medio siglo..
Para los diseñadores, también es una excelente manera de reflexionar sobre la cantidad de cambio que tiene una técnica o enfoque en una imagen original. Hay varias bibliotecas JS que puedes usar para propósitos de comparación. Aquí están 5 de ellos..
Veinte Veinte
Veinte Veinte 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, solo apila dos imágenes en un contenedor, luego llama veinte Veinte(); para el contenedor.
Entonces:
$ ("# contenedor"). veinte y veinte (); Veinte y veinte responde y funciona para todos los dispositivos, y si usa el marco de Foundation, esto funcionará de manera inmediata..
Yuxtaponer
Yuxtaponer lo ayuda a comparar dos piezas de medios (fotos o GIF) y le facilita resaltar el cambio entre las imágenes a lo largo del tiempo. Este complemento 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, establecerlo en vertical u horizontal, agregar etiqueta y crédito, animación y más.
Prueba una demo a continuación:
imgSlider
imgSlider es un complemento simple de jQuery para hacer un control deslizante de comparación de imágenes. El uso es simple y fácil: después de incluir JS y CSS, envuelva las imágenes en div con la izquierda clase para el antes de imagen, y Correcto clase para el después imagen, luego activala llamando .deslizador ();. Las opciones del complemento incluyen establecer la posición inicial del control deslizante y agregar / mostrar instrucciones en el control deslizante.
Llame al plugin:
$ ('. slider'). slider (); 
Cocoen
Cocoen Permite tocar con el uso del Evento jQuery-Touch. Es fácil de aplicar debido a una estructura HTML similar a la Veinte Veinte enchufar. En la pila de scripts, además de jQuery, debe incluir la biblioteca de eventos de jQuery Touch, junto con este complemento.
$ (documento) .ready (función () $ ('. cocoen'). cocoen (););
Prueba una demo 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 controlar 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í..
Prueba una demo 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 incluye la biblioteca CSS y JS de Cato y sigue 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 un efecto de filtro como sepia y escala de grises. Sin embargo, debe tener en cuenta que actualmente Cato solo tiene soporte para WebKit.
Antes después - Esto es ligero, totalmente sensible 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 hacer un control deslizante de comparación para las imágenes, Dudley Storey aplica el control deslizante al video. Para hacer que funcione, utiliza jQuery y solo unas pocas líneas de código. Vea la demostración en Codepen para ver la acción..
