• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

22.05.31 17:36 작성 조회수 99

0

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

답변 1

답변을 작성해보세요.

1

pageYOffset는 그냥 현재 스크롤된 양을 픽셀로 나타내는 값이기 때문에, 그걸 우리가 움직일 엘리먼트의 translateZ값에 적용하려면 비율이 필요한 거지요~

아래의 경우로 예를 들어 볼게요.
스크롤 전체 범위는 0 ~ 5000
translateZ는 0 ~ 200

스크롤이 0만큼 되었을 때는 똑같이 translateZ도 0이면 되는데
끝까지 스크롤이 되어서 5000이 되면 translateZ는 200이 되어야 하는거죠~
그렇기 때문에 pageYOffset을 그대로 쓰는게 아니라, 비율을 사용하는 거지요.
스크롤이 2500만큼 되면 절반 스크롤 한거니까, translate는 100이 되어야겠지요~
그 식은 (2500 / 5000) * 200 이고요.