인프런 커뮤니티 질문&답변

단위는 CSS에서 필요해서 쓰는 것이니까,
일단 최종값을 계산하신 후에 마지막에 붙여주셔도 괜찮아요~
그렇게 하시면 좀 덜 헷갈리지 않을까 싶어요^^

zMove가 그냥 숫자라면, houseElem.style.transform = `translatez(${zMove}px)`; 이런 식으로 단위는 붙여주셔야 하는거죠~

  const zMove = pageYOffset / maxScrollValue * 1000 - 490; 

490을 뺴줄때도 

vw를 뒤에 붙여주지 않아도 되나요?ㅠㅠㅠㅠㅠㅠ

아 어려워ㅠㅠㅠ

  houseElem.style.transform = `translatez(${zMove})`; 

이부분의 경우 알려주신 방법으로 바꿔봤는데요.

zMove가 변수로 쓰였는데 단위같은거 안넣어줘도 되나요?

음 그러니까..
처음에 스크롤되는 영역을 정의한 것 ok

거기서 얼마나 스크롤 되는지 알기위해

비율로 구한다고 하셨는데

얼마나 스크롤되는지 아는 방법 중 하나가 비율이라는 얘기인거죠? 그 비율을 통해 

1~1000까지로 했을때, zoom in zoom out을 처리해주는 것 같은데 

제가 비율의 의미가 잘 안다가와서

이해가 안되었던 것 같네요.

비율.

어떤 양에 대한 비

스크롤 비율에 따라 z값을 조정해주는 것이고

이 비율을 구하기 위해서

스크롤 되는 영역을 스크롤을 얼마나 했는지 수치로 나눠주면 비율이 되는 거군요..

제대로 이해한게 맞죠?ㅠㅠㅠ

뒤에 보시면 얼마나 스크롤 되었는지 그 비율을 이용해서
앞으로 전진 하도록 translateZ의 값을 설정하고,
상단 진행바도 구현하게 됩니다^^