인터렉티브하게 이미지 움직이기

 

    <img src="./layer-7.png" alt="사람" class="human" />
    <img src="./layer-1.jpg" alt="배경" class="background" />
    <img src="./layer-9.png" alt="파이트" class="pipe" />
    <div class="textWrap">
      <img src="./masthead-logo.svg" class="text3d" alt="fix nothing" />
    </div>

/* * {
  box-sizing: border-box;
} */

body {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.human {
  width: 250px;
  position: absolute;
  left: calc(50% - 125px);
  top: 50px;
  z-index: 100;
}

.background {
  width: 110%;
  position: absolute;
  z-index: -1;
}

.pipe {
  width: 500px;
  position: absolute;
  top: 300px;
  z-index: 1;
}

.textWrap {
  position: absolute;
  left: 50%;
  top: 200px;
  width: 60%;
  z-index: 0;
  transform: translate(-50%, 0);
  transform-style: preserve-3d;
  perspective: 300px;
}

  <script>
    let x = 0;
    let y = 0;
    let mx = 0;
    let my = 0;
    let speed = 0.009;

    let human = document.querySelector(".human");
    let bg = document.querySelector(".background");
    let pipe = document.querySelector(".pipe");
    let text3d = document.querySelector(".text3d");

    window.onload = function () {
      window.addEventListener("mousemove", mouseFunc, false);

      function mouseFunc(e) {
        x = e.clientX - window.innerWidth / 2;
        y = e.clientY - window.innerHeight / 2;
      }

      loop();
    };

    function loop() {
      mx += (x - mx) * speed;
      my += (y - my) * speed;

      human.style.transform = `translate(${-mx / 9}px)`;
      bg.style.transform = `translate(${mx / 9}px, ${my / 9}px)`;
      pipe.style.transform = `translate(0px, ${-my / 9}px)`;
      text3d.style.transform =
        "translate3d(" +
        -(mx / 2) +
        "px," +
        -(my / 2) +
        "px,0) rotate3d(0,1,0," +
        -mx / 50 +
        "deg)";

      window.requestAnimationFrame(loop);
    }