전진스크롤 3D 8 강의 질문입니다

Question

안녕하세요, 현재 강의를 듣고있는데 변수지정을 안했을때 pageYOffset / (document.body.offsetHeight - innerHeight) * 1000 - 490 만큼 house 에 tranformZ 를 이동시킨다고 강의를 듣고있는데 이 부분이 이해가 안가서 ㅠㅠ 질문드립니다 제가 의문이 든점은 스크롤이 이동하는만큼 transformZ를 이동한다면 pageYOffset - 490만 해도 된다고 생각했는데 막상 식을 적용해보니 이상하더라구요,, 굳이하려면 pageYOffset * 0.1 - 490 로 해야되더라구여 비율을 구해서 하는 이유를 조금 더 설명을 보충해서 듣고 싶어서 이렇게 질문 남깁니다 ㅠ

1분코딩 · Answer

pageYOffset는 그냥 현재 스크롤된 양을 픽셀로 나타내는 값이기 때문에, 그걸 우리가 움직일 엘리먼트의 translateZ값에 적용하려면 비율이 필요한 거지요~ 아래의 경우로 예를 들어 볼게요. 스크롤 전체 범위는 0 ~ 5000 translateZ는 0 ~ 200 스크롤이 0만큼 되었을 때는 똑같이 translateZ도 0이면 되는데 끝까지 스크롤이 되어서 5000이 되면 translateZ는 200이 되어야 하는거죠~ 그렇기 때문에 pageYOffset을 그대로 쓰는게 아니라, 비율을 사용하는 거지요. 스크롤이 2500만큼 되면 절반 스크롤 한거니까, translate는 100이 되어야겠지요~ 그 식은 (2500 / 5000) * 200 이고요.