Filtre CSS blanc i negre sobre slide de jQuery UI

Comparació de dues captures de pantalla d’una eina abans i després del seu redisseny.

Aleix Martí Aleix Martí

0

CSS, Front End, General

Captura de pantalla 2016-12-01 a les 15.20.32

A partir d’un projecte que estem duent a terme, se m’ha acudit fer un post sobre la comparació de dues captures de pantalla d’una eina. Les captures són l’aspecte de l’eina abans i després del seu redisseny i per plasmar-ho hem decidit fer una mena de slider on es puguin comparar les dues imatges.

Comencem…

La idea és crear un contenidor on es mostri la meitat de tots dos dissenys, i que, quan s’arrossegui el cercle central, es pugui anar veient un disseny sense deixar de veure part de l’altre.
Mentre feia algunes proves, vaig trobar la manera de fer el mateix però aplicant un filtre blanc i negre sobre una imatge, tal i com ho podeu veure a continuació:

See the Pen Masked slide by Aleix (@Aleix) on CodePen.

Per fer-ho, cal codi HTML, CSS i el mètode draggable de jQuery UI. (La imatge utilitzada es de newevolutiondesigns.com).

Estructura bàsica de l’HTML

L’estructura bàsica de l’HTML és un contenidor general ( “.border”) -més endavant veurem la seva funció- i un contenidor visible ( “.cont”) que conté dos elements  amb les imatges (“.img”, “.img2″). El tercer i últim element, serà sobre el qual actuarem per arrossegar ( “.dragme”).

El contenidor visible ( “.cont”) serveix per indicar la zona d’acció permesa de l’element ( “.dragme”). Si en lloc d’un cercle amb fletxes fos només una línia, no hi hauria problema, però si l’acció es limites al contenidor visible ( “.cont”), quan el cercle arribes al marge, aquest no permetria seguir arrossegant i quedaria així:

limit-1


El contenidor general ( “.border”)
és una mica més ample que ( “.cont”) i això permet ampliar una mica l’àrea d’acció de l’element ( “.dragme”). Així, podrem falsejar que es pot arribar al límit de l’àrea visible:

limit-3

Les imatges estan posades com background-image en dos contenidors possicionats de forma absoluta, amb un ample inicial del 50%. Un d’ells té aplicat un filtre Grayscale (100%) per convertir la imatge a blanc i negre.

JavaScript (jQuery UI)

$( “.dragme” ).draggable(
{ axis: ‘x’,
containment: “.border”,
drag: function (e, ui) {
var pos = ui.position;
$(‘.img2′).css(‘width’,pos.left);
}
});

Després de tot això, només quedaria configurar la interacció sobre l’element “.dragme” perquè pugui ser arrossegat. Ho explico a continuació:

Usant l’esdeveniment “. Draggable” sobre “.dragme”, es configura de manera que només es pugui moure sobre l’eix X , dins del contenidor “.border”, i que quan comenci la pròpia funcionalitat del “drag”, es pugui capturar el nombre de píxels que s’ha mogut el ratolí i recalcular l’amplada del contenidor amb la segona imatge.

Es pot veure el codi fent clic a les pestanyes HTML, LESS i JS. El codi CSS està escrit en LESS i es pot veure compilat fent clic al botó “View Compiled”, o es pot descarregar el zip masked-slide.

Per concloure, a l’exemple anterior, hem vist la comparació d’una mateixa imatge en color i en blanc i negre, però cal destacar que també es pot aplicar per a comparar dues imatges diferents. Tal com et mostrem a continuació:

See the Pen Gotenks fat slim by Aleix (@Aleix) on CodePen.

Aleix Martí Aleix Martí

0

CSS, Front End, General

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *