인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

96 Hannover님의 프로필 이미지
96 Hannover

작성한 질문수

애플 웹사이트 인터랙션 클론!

현재 활성시킬 씬 결정하기

스크롤 section 0-3 정확하지가 않습니다.

작성

·

121

1

section별로 currentScene 0,1,2,3이 정확하게 안떨어집니다.

.scroll-section {

padding-top: 50vh;

border:1px solid red;

}

여기서 padding-top: 50vh 를 비활성화 하니 정확하게 들어맞습니다.

javscript 에서 scrollHeight 계산시 padding-top 50vh 값을 제외하는것 같아요. 

답변 1

0

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

씬의 변화시점을 언제쯤으로 할건지에 따라 padding-top 등으로 간격을 조정하시면 됩니다~
이 예제에서는 padding-top: 50vh를 줌으로써
브라우저 아래를 기준으로 중간쯤 올라왔을 때부터 새로운 씬이 시작되도록 한 것이고요.
말씀대로 padding-top을 없애면, 새로운 섹션의 콘텐츠가 브라우저 상단에 닿는 시점에 currentScene이 바뀔거에요.
디자인이나 표현 전략에 따라 그게 나을수도 아닐수도 있고 별 차이가 없을 수도 있을텐데,
그건 만드시는 디자인의 표현에 맞게 선택하시면 될 것 같습니다^^
저같은 경우는 중간부터는 새로운 씬의 효과가 미리 적용되게 하기 위해 공통으로 padding-top을 준 것이고요~

크롬 개발자도구를 활성화 하시고,
완성 파일에서 새로운 섹션이 시작되는 시점을 눈으로 확인해 보시는 것도 도움이 될 것 같습니다^^

96 Hannover님의 프로필 이미지
96 Hannover

작성한 질문수

질문하기