Tengo este fragmento. Tengo la barra div en la que actúo con un oyente para el evento mousemove. Dependiendo de las coordenadas del mouse, los elementos de saludo se mueven en el eje x.
¿Cómo puedo, cuando el mouse ya no está en la barra, es decir, fuera de los elementos de saludo en la barra, volver a la posición inicial? Por ejemplo, mientras el mouse está sobre la barra, los elementos de saludo se mueven hacia la derecha y cuando el mouse ya no está en la barra, vuelven a su posición original.
const bar = document.querySelector('.bar'); const layer = document.querySelectorAll('.layer'); const eff = function(mouse) { layer.forEach(layer => { const x = (window.innerWidth - mouse.pageX) / 10; const y = (window.innerHeight - mouse.pageY) / 10; layer.style.transform = `translateX(${x}px)translateY(${y}px)`; }) }; bar.addEventListener('mousemove', eff); * { margin: 0; padding: 0; box-sizing: border-box; } .bar { height: 20vh; background: black; position: relative; display: flex; align-items: center; justify-content: space-around; } #red { color: red; } #blue { color: blue; } <div class="bar"> <div class="hello"> <h2 id='red' class='layer'>Hello</h2> <h2 id='blue' class='layer'>Hello</h2> </div> </div>Puede agregar otro oyente para el evento mouseleave y luego simplemente restablecer la traducción a 0px para cada capa.
const bar = document.querySelector('.bar'); const layer = document.querySelectorAll('.layer'); const eff = function(mouse) { layer.forEach(layer => { const x = (window.innerWidth - mouse.pageX) / 10; const y = (window.innerHeight - mouse.pageY) / 10; layer.style.transform = `translateX(${x}px)translateY(${y}px)`; }) }; const reset = function(mouse) { layer.forEach(layer => { layer.style.transform = `translateX(0px)translateY(0px)`; }) }; bar.addEventListener('mousemove', eff); bar.addEventListener('mouseleave', reset); * { margin: 0; padding: 0; box-sizing: border-box; } .bar { height: 20vh; background: black; position: relative; display: flex; align-items: center; justify-content: space-around; } #red { color: red; } #blue { color: blue; } <div class="bar"> <div class="hello"> <h2 id='red' class='layer'>Hello</h2> <h2 id='blue' class='layer'>Hello</h2> </div> </div>