Antes y después con HTML5, CSS y Javascript

Comparar imágenes es un arte muy usado para comparar calidad, proyectos, personas, etc. Este efecto se ha utilizado por mucho tiempo incluso antes del computador. Pero no fue hasta que Buzzfeed lo hizo popular en su website comparando personalidades, ciudades, etc.

Pero, ¿cómo se hace este efecto y cuales otras aplicaciones podemos darle? Les voy a mostrar una de muchas formas de hacerlo. En este ejmplo vamos a utilizar CSS y Javascript.

Para empezar necesitaremos dos imágenes con las mismas dimensiones. Vamos a utilizar dos imágenes cuyas dimensiones serán 970 de ancho por 250 de alto; pero puden utilizar cualquier tamaño siempre que indiquen en la estructura CSS las medidas.

Ahora necesitaremos la estructura HTML. En esta utilizaremos la etiqueta especializada <figure> para colocar nuestras imágenes y que a su vez nos permite interactuar con ellas con ella con propiedades que no posee otra etiqueta.

El HTML

<!DOCTYPE html>
<html>
<head>
<title>Antes y Después con CSS</title></head>
<body>
<div id="comparison">
<figure>
<div id="divisor"></div>
</figure>
<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>
</body></html>

Una vez que tenemos nuestra estructura vamos a colocar los elementos necesarios para nuestro efecto antes y después, también conocido como “20-20″.

Primero, vamos a inspeccionar nuestra estructura, para luego definir nuestro CSS y javascript complementarios.

Tenemos un contenedor <div> con el id=”comparison” el cual servirá de esqueleto para nuestro efecto dónde asignaremos las dimensiones que utilizaremos. En este ejemplo, ya habíamos indicado que nuestras dimensiones serían 970 de ancho por 250 de alto, en píxeles.

Dentro del contenedor vamos a tener la etiqueta <figure> que será nuestro objeto de comportamiento. Dentro de este, colocaremos una capa o elemento <div> que actuará como divisor o indicador de segmentos de la imágen.

Por último, colocaremos un elemento “input” de tipo “range” de HTML5 que servirá de guía o botón de desplazamiento. Este elemento ejecutará o hará llamado a nuestra función moveDivisor() que veremos luego cuando analicemos el javascript de nuestro proyecto.

<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">

Ya que tenemos nuestro esqueleto y conocemos su estructura, vamos a necesitar el CSS necesario para sobreponer las imágenes, indicar el porcentaje de visibilidad, ubicación de nuestros elementos, etc. El cual vamos a incluir dentro del a etiqueta <head>…</head> de nuestra estruictura HTML.

El CSS

<style>
/* holder */
div#comparison {
width: 60vw; height: 60vw;
max-width: 970px; max-height: 250px;
overflow: hidden;
}

div#comparison figure {
background-image: url(before.jpg);
background-size: cover; font-size: 0;
width: 100%; height: 100%; margin: 0;
position: relative;
}

div#comparison figure > img {
position: relative; width: 100%;
}

div#comparison figure div {
background-image: url(after.jpg);
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
overflow: hidden; bottom: 0; height: 100%;
} 
/* slider */
input[type=range]{
-webkit-appearance:none;
-moz-appearance:none;
position: relative;
top: -2rem; left: -2%;
background-color: rgba(255,255,255,0.1);
width: 102%;
}

input[type=range]:focus { outline: none; }

input[type=range]:active { outline: none; }

input[type=range]::-moz-range-track {
-moz-appearance:none;
height:15px;
width: 98%;
background-color: rgba(255,255,255,0.1);
position: relative;
outline: none;
}

input[type=range]::active {
border: none; outline: none;
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
width: 20px; height: 15px;
background: #fff;
border-radius: 0;
}

input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px; height: 15px; background: #fff;
border-radius: 0;
}

input[type=range]:focus::-webkit-slider-thumb {
background: rgba(255,255,255,0.5);
}

input[type=range]:focus::-moz-range-thumb {
background: rgba(255,255,255,0.5);
}
</style>

En nuestro CSS, los elementos más importantes son el contendor “comparison” que establece las dimensiones, la etiqueta <figure> que contendrá nuestra estado inicial o “before” y el elemento o capa “<div>” dentro de “<figure>” que será la segunda capa de nuestro efecto.

Es importante resaltar las propiedades “position” y “background-size”, pues son estas propiedades la base para nuestro efecto.

El Javascript

El javascript es lo que nos permitirá efectuar el efecto en tiempo real y permitirnos hacer el input o efecto interactivo entre ambas imágenes y lo que nos permitirá reasignar los valores CSS. Entonces, vamos a tener tres partes:

1. Identificar los elemetos interactivos

Nuestros elementos interactivos son dos: el <div> o capa dentro de la etiqueta <figure> que será la sobreposición de imágen y el <input> de tipo “range” el cual hemos identificado como ID “slider” para facilitar la referencia. Ambos los asignaremos a variables para permitirnos interactuar con cada objeto.

divisor = document.getElementById(“divisor”);
slider = document.getElementById(“slider”);

2. Crearemos una función para modificar la propiedad width de nuestro “divisor” que será el efecto visual y que recibirá el valor en porcentaje del movimiento del slider o guía mientras arrastramos o presionamos y movemos el mismo.

function moveDivisor() { 
   divisor.style.width = slider.value+"%"; 
}

3. Llamaremos nuestra función al cargar la página para inicializar nuestro efecto.

window.onload = function() {
   moveDivisor();
};

Si unimos todo nuestro bloques de código tendremos un fichero similar a este:

<!DOCTYPE html>
<html>
<head>
<title>Antes y Despues con CSS</title>
<style> 
/* holder */
div#comparison {
width: 60vw; height: 60vw;
max-width: 970px; max-height: 250px;
overflow: hidden;
}
div#comparison figure {
background-image: url(before.jpg);
background-size: cover; font-size: 0;
width: 100%; height: 100%; margin: 0;
position: relative;
}
div#comparison figure > img {
position: relative; width: 100%;
}
div#comparison figure div {
background-image: url(after.jpg);
background-size: cover;
position: absolute;
width: 50%;
box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
overflow: hidden; bottom: 0; height: 100%;
} 
/* slider */
input[type=range]{
-webkit-appearance:none;
-moz-appearance:none;
position: relative;
top: -2rem; left: -2%;
background-color: rgba(255,255,255,0.1);
width: 102%;
}
input[type=range]:focus { outline: none; }
input[type=range]:active { outline: none; }
input[type=range]::-moz-range-track {
-moz-appearance:none;
height:15px;
width: 98%;
background-color: rgba(255,255,255,0.1);
position: relative;
outline: none;
}
input[type=range]::active {
border: none; outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
width: 20px; height: 15px;
background: #fff;
border-radius: 0;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px; height: 15px; background: #fff;
border-radius: 0;
}
input[type=range]:focus::-webkit-slider-thumb {
background: rgba(255,255,255,0.5);
}
input[type=range]:focus::-moz-range-thumb {
background: rgba(255,255,255,0.5);
} 
</style>
</head>
<body> 
<div id="comparison">
<figure>
<div id="divisor"></div>
</figure>
<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>

<script> 
divisor = document.getElementById("divisor");
slider = document.getElementById("slider");
function moveDivisor() { divisor.style.width = slider.value+"%"; } 

//reset after page load
window.onload = function() {
moveDivisor();
};
</script> 
</body>
</html>

Listo! puedes ver el efecto abriendo el fichero con tu navegador preferido.

¿Cuales aplicaciones podemos darle a este efecto?

Simple, un comparador de imágenes. Podemos utilizarlo en nuestro website, aplicaciones, etc. Otra utilidad es utilizarlo en banners HTML5 para campañas digitales. Esto último gracias a que muchos proveedores de espacios o “publishers” cuantan con servidores que permiten emplear HTML5 como banners para desktop y dispositivos móviles, por ejemplo, google adwords.

Puedes descargar el código y elementos (.zip) de este ejemplo en este link.

Las fotos utilizadas gracias a National Geographic. “Before New York”.