Mi resultado esperado es que la imagen se mueva dentro del contenedor de acuerdo con los cálculos realizados en la posición del mouse en el eje x. Es por eso que Xratio varía de -1 a 1.
No estoy seguro de cuál es la propiedad de solo lectura aquí. console.log(typeof Xratio) y obtuve "número".
También usé console.log(typeof easeOutExpo) y vi "función".
¿Podría ser esto un simple error que no entiendo con la asignación?
const bxImg = document.querySelector('.bx-pic'); document.addEventListener('mousemove', (e) => { const xRatio = (e.clientX / window.innerWidth) * 2 - 1; console.log(typeof xRatio); const xRatioEased = 0; if (xRatio >= 0) { xRatioEased = easeOutExpo(xRatio); } else { xRatioEased = easeOutExpo(-xRatio * -1) } bxImg.style.transform = `scale(1.2) translate3D(${-xRatioEased * 10}px, ${0}, ${0})`; }) function easeOutExpo(n) { if (n === 1) { return 1; } else { return 1 - Math.pow(2, -10 * n); } } console.log(typeof easeOutExpo); html, body { width: 100%; height: 100%; } body { background-color: #FDFDFD; } img { width: 100%; height: 100%; object-fit: cover; } .bx-wp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; width: 350px; height: 350px; outline: 30px solid royalblue; } .bx { position: relative; transform: scale(1.2); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="bx-wp"> <img src="https://images.unsplash.com/photo-1641113994135-a9f230b1f9b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" alt="A Mountain" class="bx bx-pic"> </div> <script src="script.js"></script> </body> </html>Ha declarado xRatioEased como const , por lo que solo se puede configurar en la inicialización. Reemplace const xRatioEased con let xRatioEased y todo debería funcionar.
xRatioEased es una constante. Las constantes sólo se pueden cambiar en la inicialización . Si declara xRatioEased como una variable (con let o var ), puede solucionar el problema.
Si quieres saber más sobre las constantes y cuándo usarlas, puedes dirigirte a este enlace