The idea of parallax is to put an image as the background of your page, whose view changes by moving the mouse. In fact, the mouse pointer acts like a camera, which sees the image from different points of view. It is interesting and has been used many times in web templates. See the demo and enjoy!

HTML
<!-- this script got from www.devanswer.com -->
<div id="parallax"><h1>Parallax</h1></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.devanswer.com">Developer Code</a>

CSS
body{
  margin: 0;
  background-color: #1d1e22;
}
#parallax {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(http://devanswer.com/codes/files/depth-3.png), url(http://devanswer.com/codes/files/depth-2.png), url(http://devanswer.com/codes/files/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", parallax);
  const elem = document.querySelector("#parallax");
  // 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}% ${50 - (_mouseY - _h) * 0.01}%`;
    let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;
    let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;
    let x = `${_depth3}, ${_depth2}, ${_depth1}`;
    console.log(x);
    elem.style.backgroundPosition = x;
  }

})();