Efecto rayos X, básico
Este ejemplo muestra como podemos usar una máscara de recorte (clip-path en CSS) para crear un efecto como de rayos X: poder simular que ves a través de un objeto y revelar lo quee esconde. En este ejemplo es como ver con rayos X los huesos de una mano. Es un código simple, sin usar objetos.
Usamos la propiedad clip-path de CSS y los eventos de movimiento y click del ratón.
Solución
Esta aplicación se parece a la linterna Vamos a colocar en la página un bloque div (pantalla) como contendor de dos imágnes (pueden ser dos bloques div).
Una capa hará de interior (la que quedará debajo), y otra de parte exterior.
Incluimos una definición del clip-path, o máscraa, que tendrá forma de círculo mediante un svg. Este elemento lo usamos para la definición de los estilos CSS y será manipulada desde Javascript
<body>
<div class="pantalla">
<img class="exterior" src="/imgs/manos.jpg" alt="Manos">
<img class="interior" src="/imgs/huesos.jpg" alt="Huesos">
<svg width="0" height="0">
<clippath id="clipping">
<circle id="lente" cx="50" cy="50" r="0" />
</clippath>
</svg>
</div>
</body>
<script>
let lente = document.getElementById("lente");
let pantalla = document.querySelector(".pantalla");
lente.setAttribute("cx", 300);
pantalla.addEventListener("mousemove", (e) => {
lente.setAttribute("cx", e.pageX - pantalla.offsetLeft);
lente.setAttribute("cy", e.pageY - pantalla.offsetTop);
});
pantalla.addEventListener('mousedown', (e)=>{
if (lente.getAttribute("r") ==0 ){
lente.setAttribute("r","100")
}
else{
lente.setAttribute("r","0")
}
});
pantalla.addEventListener("mouseleave", (e) => {
lente.setAttribute("r", "0");
});
</script>
<style>
.pantalla{
position: relative;
display: block;
margin: 0 auto;
width: fit-content;
height: fit-content;
}
.exterior {
top:0;
left:0;
}
.interior {
position: absolute;
top:0;
left:0;
-webkit-clip-path: url(#clipping);
clip-path: url(#clipping);
}
#lente {
transition: r 0.2s ease;
}
</style>
Explicación
Este efecto se puede crear aprovechando la propiedad clip-path (máscara de recorte) de CSS. Esta propiedad permite definir un área transparente dentro de un bloque div. Puede ser también translúcida usano opacity
Basta con dos eventos :
- mousedown: para conectar / cerrar el visor
- mouseleave para cerrar el visor si el ratón sale de la pantalla
- mousemove para desplazarla.
El clip-path se manipula mediante el elemento svg incluido en la página. Este marca las propiedades de la máscara y por tanto del bloque que usamos como interior (los huesos).
El evento mousedown hace que el radio del clip-path alterne ente 0 y el valor máximo (100 en el ejemplo)
El evento mousemove cambia la posición del area de recorte, el área transparente, y permite desplazarnos por todo el bloque
El evento mouseleave cierra el área transparente cuando el ratón se sale de la pantalla
Es así de simple.