Mascaras de divs con imagenes, con movimiento 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:
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.<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;
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.
