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

안녕하세요! :) 영상에 보면 모두 나와 있는 내용인데 다시 한번 설명드릴게요 :) 그리고 섹션5가 조금 난이도가 있는 편이고 수업의 수식 코드는 계속 반복되기에 조금 어렵다면 처음부터 끝까지 한번 학습하고 다시 한번 학습해 보는걸 추천드립니다. ^^

[질문] parallaxSpeed를 1200로 초기화 하셨는데, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요 ? 숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다. 혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.

답변 : start, end값을 생각하시는 걸 보니 패럴럭스 오픈소스 라이브러리 개념으로 접근하셔서 혼동스러워 하는 것 같네요~! 물론 코드를 조금 응용하면 start, end값으로 작동하도록 변경할 수 있습니다. 수업에서는 섹션 .sec_parallax 엘리먼트를 기준으로해 백분율(패럴럭스 시간)을 구하는데요. 이 엘리먼트의 위치값을 계산해 parallaxThisTop에 담았고 이 값이 패럴럭스 시작 기준이 되는 겁니다. ^^ 그리고 parallaxSpeed 값으로 백분율 시간을 조절해 패럴럭스 요소들이 조금 더 빨리 이동하고 느려지도록 조절하고 있는데요. 이 부분이 end값(거리)이라고 생각하면 될 것 같습니다. 어떻게 보면 start, end 값과 비슷하지만 이 예제에선 스피드 개념에 더 가깝다고 생각하면 될 것 같아요.

parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음

[질문] 여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,

이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?

강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요

답변 : 이 부분은 위 답변에서 설명한 부분입니다. parallaxPercent 백분율을 구하는 부분이예요 :) 수업에서 여러 차례 나오는데 이 백분율 값을 조정해 패럴럭스 시간을 구하고 이동할 거리를 백분율 값에 곱해 인터렉션을 구현하는 겁니다. :)

var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.

[질문] 패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?

변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?

패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?

var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드

var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다

답변 : 네 요소는 이미지가 맞습니다. :) css 코드를 보면 이미지는 position: absolute로 위치를 잡아 두었고 js코드를 보면 translate로 위치값을 조정하는데요. 이때 parallaxStartValue를 이용해 parallaxMoveDistance 값을 구했고 이 값이 이미지 요소에 translate 로 적용되어 이미지 위치를 조정하는 겁니다. (개발자 도구로 확인해 보면 스크롤 전에 parallaxStartValue 값이 이미지에 적용되어 있는 것을 확인할 수 있을 거예요.) 다시 한번 말씀드리는데 영상에 모두 나와있는 내용입니다. parallaxThisTop은 위에서 충분히 설명드렸네요 ^^;

[질문] 첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?

parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음

parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함

답변 : 이 부분은 위에서 모두 설명한 내용입니다. :) 제 생각엔 의미 부여로 접근하기보다 로그를 찍어보며 수식, 작동 원리에 대한 이해로 접근하는 게 좋을 것 같네요 ^^

[질문] parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,

parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.

답변 : 모든 변수명에 para~를 붙인 이유는 스코프 개념이 없는 초보자 분들을 위함입니다. :) 이 수업은 기초적인 부분보다는 수식과 스크롤 인터렉션에 대한 이해에 중점을 두고 있습니다 :) parallaxPercent 역시 위에서 충분히 설명했다고 생각이 드네요 ^^

그럼 또 다른 궁금증이 생기면 문의주세요 :D