Filtro blanco y negro CSS sobre slide jQuery UI
Comparación de dos capturas de pantalla de una herramienta antes y después de su rediseño.
A partir de un proyecto que estamos desarrollando, se me ha ocurrido hacer un post sobre la comparación de dos capturas de pantalla de una herramienta. Las capturas son el aspecto de la herramienta antes y después de su rediseño. Para plasmarlo, hemos decidido hacer una especie de slider en el que se puedan comparar ambas imágenes.
Empezamos…
La idea es crear un contenedor donde se muestre la mitad de ambos diseños, y que, al hacer click y arrastrar el cículo central, se pueda ir viendo uno de los diseños sin perder de vista el otro.
Haciendo algunas pruebas, di con la forma de hacer lo mismo pero aplicando un filtro blanco y negro sobre una imagen, tal y como podéis ver a continuación:
Para hacerlo es necesario código HTML, CSS y el método draggable de jQuery UI. (La imagen usada es de la web newevolutiondesigns.com)
Estructura básica del HTML
La estructura básica del HTML es un contenedor general (“.border”) -más adelante veremos su función- y un contenedor visible (“.cont”) que a su vez contiene dos elementos con las imágenes (“.img”, “.img2”). Y un último elemento (“.dragme”), que será sobre el que actuaremos para arrastrar.
El contenedor visible (“.cont”) sirve para indicar la zona de acción permitida del elemento (“.dragme”). Si en lugar de un círculo con flechas fuera sólo una línea, no habría problema, pero si la acción se limitara al contenedor visible (“.cont”), cuando el círculo
llegara al borde, este no permitiría seguir arrastrando y quedaría así:
El contenedor global (“.border”) es un poco más ancho que (“.cont”) y esto permite ampliar un poco el área de acción del elemento (“.dragme”). Así, podremos falsear que se puede llegar al límite del área visible:
Las imágenes están puestas como background-image en dos contenedores posicionados de forma absoluta, con un ancho inicial del 50%. Uno de ellos tiene aplicado un filtro grayscale (100%) para convertir la imagen a blanco y negro.
JavaScript (jQuery UI)
$( “.dragme” ).draggable(
{ axis: ‘x’,
containment: “.border”,
drag: function (e, ui) {
var pos = ui.position;
$(‘.img2’).css(‘width’,pos.left);
}
});
Después de todo esto, ya sólo quedaría configurar la interacción sobre el elemento “.dragme” para que pueda ser arrastrado. Lo explico a continuación:
Usando el evento “.draggable” sobre “.dragme”, se configura de forma que sólo pueda moverse sobre el eje X, dentro del contenedor “.border”, y que cuando empieze la propia funcionalidad del “drag”, se pueda capturar el número de píxels que se ha movido el ratón y recalcular el ancho del contenedor con la segunda imagen.
Se puede ver el código haciendo clic en las pestañas HTML, LESS y JS. El código CSS está escrito en LESS y se puede ver compilado haciendo clic en el botón “View Compiled”, o se puede descargar el zip masked-slide.
Para concluir, en el ejemplo anterior, hemos visto la comparación de una misma imagen en color y en blanco y negro, pero cabe destacar que también se puede aplicar para comparar dos imágenes distintas. Tal y como te mostramos a continuación:
