(function() { // Add event listener document.addEventListener("mousemove", parallax); const elem = document.querySelector("#hero"); // Magic happens here function parallax(e) { let _w = window.innerWidth/2; let _h = window.innerHeight/2; let _mouseX = e.clientX; let _mouseY = e.clientY; let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${70 - (_mouseY - _h) * 0.01}%`; let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${60 - (_mouseY - _h) * 0.02}%`; let _depth3 = `${50 - (_mouseX - _w) * 0.04}% ${40 - (_mouseY - _h) * 0.04}%`; let x = `${_depth3}, ${_depth2}, ${_depth1}`; console.log(x); elem.style.backgroundPosition = x; } })();