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

AirDream님의 프로필 이미지

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

전진! 3D 스크롤 8

질문이요

21.03.11 11:42 작성

·

206

0

let maxScrollValue = document.body.offsetHeight - window.innerHeight;

전체 스크롤할 수 있는 범위는 알겠는데

얼마나 스크롤했는지 비율을 알기 위해서?

스크롤 비율을 알면 더 좋은건가요?

여기서 왜 비율을 알아야하는지..

비율을 왜 쓰는지 설명이 없고

갑자기 비율을 계산하시고 이에 대한 설명만하셔서 이해가 안되네요.

답변 5

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

2021. 03. 22. 01:10

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

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

0

AirDream님의 프로필 이미지
AirDream
질문자

2021. 03. 12. 13:17

  const zMove = pageYOffset / maxScrollValue * 1000 - 490; 

490을 뺴줄때도 

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

아 어려워ㅠㅠㅠ

0

AirDream님의 프로필 이미지
AirDream
질문자

2021. 03. 12. 13:15

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

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

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

0

AirDream님의 프로필 이미지
AirDream
질문자

2021. 03. 12. 13:00

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

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

비율로 구한다고 하셨는데

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

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

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

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

비율.

어떤 양에 대한 비

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

이 비율을 구하기 위해서

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

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

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

2021. 03. 11. 14:40

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

AirDream님의 프로필 이미지
AirDream
질문자

2021. 03. 12. 12:33

하.. 왜 이해가 안돼지 ㅠㅠ

pageYOffset는 (얼마나 스크롤 했는지 알려주는 세로 픽셀 값) / maxScrollValue(스크롤 할 수 있는 범위) = 비율인데

이 비율 값을 통해서 내가 얼마나 스크롤 할 수 있는지 알 수 있다는 건가요?

AirDream님의 프로필 이미지

작성한 질문수

질문하기