Mientras intentaba ingresar a la animación usando un evento de movimiento del mouse, encontré un problema sobre cómo obtener el número específico con un límite en la dirección izquierda y derecha mientras movía el evento del mouse.

como si la posición del mouse está en 500 dentro de un contenedor de 1000 de ancho, una función debería devolver 0

También en Cómo revertir el retorno como si estuviera en 0, debería devolver 8

HTML:

 <div class="container"> <h1>Mouse Move</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, magni. </p> </div>

CSS:

 body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; background-color: #2c3e50; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container { background-color: white; color: #2c3e50; max-width: 300px; padding: 15px; border-radius: 3px; }

JS:

 const CARD_CONTAINER = document.querySelector('.container'); let window_width = window.innerWidth; window.addEventListener('mousemove', (event) => { let getTranslateX = (event.clientX / window_width) * 8; console.log(getTranslateX); CARD_CONTAINER.style.transform = `translateX(-${getTranslateX}px)`; });