JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<div id="parallax">
	<h1>
	台北
	</h1>
</div>

CSS

body {
  padding: 0;
  font-family: Helvetica;
  margin: 0;
  background-color: #1d1e22;
  overflow: hidden;
}

#parallax {
  width: 1080px;
  height: 100vh;
  background-image: url(https://i.ibb.co/Bqz2k8b/trees.png), url(https://i.ibb.co/dKhxYb9/buildings.png), url(https://i.ibb.co/WfBRYr9/Background.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;

}


h1 {
  position: absolute;
  top: 20%;
  left: 15%;
  color: #fff;
  opacity: 0.92;
  font-size: 5vw;
  mix-blend-mode: overlay;
}

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;
  }

})();