Paralax text1

by Petr Haluza

HTML

<div id="paralax"><h1>Paralax</h1></div>

CSS

body{
  margin: 0;
  background-color: #1d1e22;
}
#paralax {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: 
url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-3.png), 
url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-2.png), 
url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;
}
h1 {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: "Arial";
  text-transform: uppercase;
  opacity: .2;
  font-size: 70px;
}

JavaScript

(function() {
    // Add event listener
    document.addEventListener("mousemove", paralax);
    const elem = document.querySelector("#paralax");
    // Magic happens here
    function paralax(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.001}% ${50 - (_mouseY - _h) * 0.001}%`;
        let _depth2 = `${50 - (_mouseX - _w) * 0.002}% ${50 - (_mouseY - _h) * 0.002}%`;
        let _depth3 = `${50 - (_mouseX - _w) * 0.006}% ${50 - (_mouseY - _h) * 0.006}%`;
        let x = `${_depth3}, ${_depth2}, ${_depth1}`;
        console.log(x);
        elem.style.backgroundPosition = x;
    }

})();