📁 EFECTO RAYOS X JAVASCRIPT HTML
⌨️ CODIGO PARA CREAR EL EFECTO DE RAYOS X EN JAVASCRIPT

💾 DESCARGAR CODIGO Tamaño 2 Kb

ESTE CODIGO VA DENTRO DE LAS ETIQUETAS < BODY > < /BODY >
<div class="pantalla"> <img class="exterior" src="/img/manos.jpg" alt="Manos"> <img class="interior" src="/img/huesos.jpg" alt="Huesos"> <svg width="0" height="0"> <clippath id="clipping"> <circle id="lente" cx="50" cy="50" r="0" /> </clippath> </svg> <p>Hac click con el ratón para abrir la lente</p> </div>

INSERTA ESTE CODIGO DENTRO DE LAS ETIQUETAS < BODY > < /BODY> MEJOR AL FINAL
<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>

INSERTA ESTE CODIGO DENTRO DE LA ETIQUETA < HEAD > < /HEAD >
<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>