mousemove 활용한 translateX 화면

위 gif 처럼 mouseover 시 이미지들이 움직이게 만들어보자.

<h1 class="title"><img src="./images/joker_logo.png" alt=""></h1>
        <div class="contWrap">
            <div class="dcLogo"><img src="./images/dc_logo.png" alt=""></div>
            <div class="human"><img src="./images/joker.png" alt=""></div>
            <div class="whySo"><img src="./images/why.png" alt=""></div>
            <div class="shadow"><img src="./images/jokerShadow.png" alt=""></div>
        </div>
        <div class="subTitle">
            <img src="./images/download.png" alt="">
        </div>

body {
    width: 100%;
    height: 100vh;
    background: url(../images/bg-pc.png) center center / cover no-repeat;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
img {
    width: 100%;
}

.title {
    text-align: center;
}
.title img {
    width: 300px;
}
.subTitle {
    position: fixed;
    top: 10%;
    left: 20px;
}
.subTitle img {
    width: 70px;
}

.contWrap {
    position: relative;
    margin: 0 auto;
    width: 80vw;
    height: 100vh;
}

.contWrap div {
    position: absolute;
}
.contWrap div img {
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}

.dcLogo {
    width: 150px;
    left: 50%;
    bottom: 180px;
    transform: translateX(-250%);
}
.human {
    width: 512px;
    left: 50%;
    bottom:194px;
    transform: translateX(-50%);
}
.whySo {
    width: 306px;
    left: 50%;
    top: 4%;
    transform: translateX(52%) rotate(-25deg);
}
.shadow {
    width: 550px;
    left: 50%;
    bottom:194px;
    transform: translateX(-50%);
    z-index: -1;
    opacity: .7;
}

let x = 0;
let targetX = 0;
const speed = 0.01;

const contentAll = document.querySelectorAll('.contWrap img');

const dcLogo = contentAll[0];
const human = contentAll[1];
const whySo = contentAll[2];
const shadow = contentAll[3];

window.addEventListener('mousemove',(e)=>{
  x = e.pageX - window.innerWidth / 2;
});


const loop = () => {

  targetX += (x - targetX) * speed;

  human.style.transform = `translateX(${-targetX / 20}px)`;
  dcLogo.style.transform = `translateX(${-targetX / 40}px)`;
  whySo.style.transform = `translateX(${-targetX / 30}px)`;
  shadow.style.transform = `translateX(${-targetX / 10}px)`;

  window.requestAnimationFrame(loop);

}
loop();

mousemove 를 활용하여.
x = e.pageX - window.innerWidth / 2;
화면의 중앙을 계산해주고,

각각 의 이미지들을 translateX 로 움직여준다.
requestAnimationFrame을 활용 하면 더 부드럽게 만들어줄수있다.