Hola, buenas a todos.
Otra vez me paso por aquí luego de pensar y pensar y no encontrar solución. Resulta que necesito hacer para una pagina una imagen que esté sobre otra, y que ésta de encima se vaya cortando conforme se mueva una barra para que se revele la imagen de atrás; básicamente es una mascara de una imagen sobre otra con movimiento.
Algo como lo de esta página:
http://ellanse.com/hcp/treatment/before-and-after/
Lo que hice fue crear:
-un div contenedor
-otro div dentro del primero con la imagen de fondo y background:cover
-otro igual encima de éste último con una imagen de fondo distinta, y por ultimo
-uno mas con la imagen de la barra.
Cada uno tiene un z-index por encima del anterior. Al ser background:cover la imagen se corta con el width del div en lugar de hacer un resize.
Código:
<div class="container">
<div id="divabajo"></div>
<div id="divarriba"></div>
<div id="barrita"></div>
</div>
#divabajo{
position: absolute;
width: 99%;
background: url(../../img/paneles.jpg);
background-size: cover;
min-height: 98%;
z-index: 2;
}
#divarriba{
position: absolute;
width: 99%;
background: url(../../img/paneles2.jpg);
background-size: cover;
min-height: 98%;
z-index: 3;
}
#barrita{
position: absolute;
background-color: rgba(0, 255, 255, 0.49);
width: 5px;
min-height: 98%;
z-index: 4;
Hasta ahi todo bien. Resulta que al presionar la barra y arrastrarla, se mueve la imagen de encima. Usando window.event.x lo conseguí, pero ahora resulta que la página ha de ser responsiva y eso me modifico todo el diseño que tenía. No me importa rehacer el código.
No se como hacer para que el div de la imagen de encima (que es la máscara) sepa que su "width" debe ser igual al espacio entre el div contenedor y el div de la barra, y que cambie cada que la barra cambia de lugar.
Sé que no es algo tan difícil, pero me quedé sin ideas :/
Espero haberme explicado, y gracias de antemano.