23.10.11 23:42 작성
·
213
·
수정됨
0
안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요,
브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다.
제가 이해한 것은
1. 요소의 offsetTop과 scrollTop 값을 통해서 계산한 위치값 포인트에서, 모든 애니메이션이 시작한다(모든 애니메이션의 시작)
2. 패럴럭스 애니메이션을 위해서, 해당 이미지가 일어날 섹션이 아닌, 그 위의 섹션 위치에서 애니메이션을 실행한다.
3. 값은 1000이든 2000이든 어떤 값에서 0으로 줄어드는 로직으로 계산한다.
이 세가지 내용입니다.
parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함.
해당 구문 이후로는 계속 이해가 가질 않아서요
텍스트로 길게 장황하게 라도 설명해주시면, 작성해주신 텍스트 내용 안에서 다시 이해해보는데 큰 도움이 될 듯합니다.
감사합니다.
var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드
[질문]
parallaxSpeed를 거리라고 강좌에서 말씀해주셨는데, 1200로 초기화 될 때, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요?
숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다.
혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?
거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.
parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음
[질문]
여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,
이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?
강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요
var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.
[질문]
패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?
변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?
패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?
var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드
var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다
[질문]
첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?
parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음
parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함
[질문]
parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,
parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
답변 1
0
2023. 10. 12. 14:36
안녕하세요! :) 영상에 보면 모두 나와 있는 내용인데 다시 한번 설명드릴게요 :) 그리고 섹션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