Mascara que se mueve, comillas invertidas

PHOTO EMBED

Wed Feb 02 2022 17:42:13 GMT+0000 (UTC)

Saved by @samn #html #css #javascript

// hay dos formas de hacer: 1(variables css y .setProperty para modificar las propiedades);
                          y 2(usando vien `` y clipPath=`circle()`).
                          
1) 
//solo agregamos correcatamente objeto.style.clipPath = `circle(50px at $(x) $(y))`; siendo x,y //variables de la función que gracias a `` se podran incluir.

2)
//javascript
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
function moverCursor(e){
    let m = e.pageX - t.left  ;
    let n = e.pageY - t.top  ;
    img1.style.setProperty(`--x`,`${m}px`);
    img1.style.setProperty(`--y`,`${n}px`);
}
img1.addEventListener("mousemove", moverCursor);

//css
.box {
   width: 500px;
   height: 250px;
   border: 2px solid red;
   position: relative;
}

.img1 {
   width: 450px;
   height: 240px;
   background-color: purple;
   --x: 0px;
   --y: 0px;
   --r: 50px;
   clip-path: circle(var(--r) at var(--x) var(--y));
}
//html
    <div class="box">
	<div class="img1">Hello word, hola mundo<br>Hello word, hola mundo<br>Hello word, hola mundo</div>
    </div>
content_copyCOPY

LINK: uso de "",'', ``; conviene usar ``: Aprendimos como modificar variables css, y con eso propiedades los valores de las propiedades css.

https://medium.com/@jekamabu/la-verdadera-diferencia-entre-comillas-simples-y-dobles-comillas-en-javascript-508a4a572190