질문이요

Question

let maxScrollValue = document.body.offsetHeight - window.innerHeight; 전체 스크롤할 수 있는 범위는 알겠는데 얼마나 스크롤했는지 비율을 알기 위해서? 스크롤 비율을 알면 더 좋은건가요? 여기서 왜 비율을 알아야하는지.. 비율을 왜 쓰는지 설명이 없고 갑자기 비율을 계산하시고 이에 대한 설명만하셔서 이해가 안되네요.

studiomeal · Answer

단위는 CSS에서 필요해서 쓰는 것이니까, 일단 최종값을 계산하신 후에 마지막에 붙여주셔도 괜찮아요~ 그렇게 하시면 좀 덜 헷갈리지 않을까 싶어요^^ zMove가 그냥 숫자라면,  houseElem.style.transform = `translatez(${zMove}px)`; 이런 식으로 단위는 붙여주셔야 하는거죠~

AirDream · Answer

const zMove = pageYOffset / maxScrollValue * 1000 - 490;  490을 뺴줄때도  vw를 뒤에 붙여주지 않아도 되나요?ㅠㅠㅠㅠㅠㅠ 아 어려워ㅠㅠㅠ

AirDream · Answer

houseElem.style.transform = `translatez(${zMove})`;  이부분의 경우 알려주신 방법으로 바꿔봤는데요. zMove가 변수로 쓰였는데 단위같은거 안넣어줘도 되나요?

AirDream · Answer

음 그러니까.. 처음에 스크롤되는 영역을 정의한 것 ok 거기서 얼마나 스크롤 되는지 알기위해 비율로 구한다고 하셨는데 얼마나 스크롤되는지 아는 방법 중 하나가 비율이라는 얘기인거죠? 그 비율을 통해  1~1000까지로 했을때, zoom in zoom out을 처리해주는 것 같은데  제가 비율의 의미가 잘 안다가와서 이해가 안되었던 것 같네요. 비율. 어떤 양에 대한 비 스크롤 비율에 따라 z값을 조정해주는 것이고 이 비율을 구하기 위해서 스크롤 되는 영역을 스크롤을 얼마나 했는지 수치로 나눠주면 비율이 되는 거군요.. 제대로 이해한게 맞죠?ㅠㅠㅠ

studiomeal · Answer

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