좌우이동 구현

평소에는 웹페이지를 구현해보는 연습도 하고 그랬기에 세로스크롤이 전부였다. 그래서 이번에는 좌우스크롤도 해보고 싶어 생각해본게 웹페이지가 아닌 계속 이어지는 이미지에 자동차가 달려나가는 모습을 구현해보고 싶었다.

과정

자동차가 이미지 안에서 움직이게 하려고 자동차가 위아래로 서스펜션이 일어나도록 구현하였고, 도로 이미지가 움직이도록 하여 차가 움직이는 것처럼 구현하였다.

.car {
    animation: suspension 1s linear infinite;
}


@keyframes suspension {
    100% {
        transform: translateY(-1px);
    }
    50% {
        transform: translateY(2px);
    }
    0% {
        transform: translateY(-1px);
    }
}

let surface = document.getElementById('surface');


let y = 0;
let my = 0;
let speed = 0.05;


night.addEventListener('wheel', (e) => {

    y = e.deltaY;

    my += (y - my) * speed;

    if (y > 0) {
        surface.style.transform = `translateX(${-my}px)`;
    } else {
        surface.style.transform = `translateX(${-my}px)`;
    }
});

wheel 이벤트를 주어 마우스 휠이 동작할 때마다의 좌표를 생각해서 양수일 때는 오른쪽으로 가도록, 음수일 때는 왼쪽으로 가도록 만들었다.

콘솔을 찍어보면 잘 나오는 걸 알 수 있다.

그런데 여길 보면 250을 넘어가면 같은 방향으로 휠을 돌려도 줄어들 때도 있고 자동차 이미지도 잘 전진이 되지 않는다...

뭔가 느낌이 이미지를 반복해놓았는데 이미지 한개의 width를 넘어갈 때는 잘 안되는 느낌이 든다...

더 고민해봐야겠다ㅜㅜ