section 5 - set 3번에서 질문있습니다.
308
작성한 질문수 3
선생님 안녕하세요!
궁금한게 있어서 글을 올렸습니다.
section5 의 set3 폴더의 index.html에서
parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent / 100))));
로 수식을 입력하셨는데 어떠한 이유로 저렇게 식을 사용하셨는지 궁금합니다.
계속 보다가 헷갈려서 도움의 손길을 요청합니다..ㅜ
답변 3
0
안녕하세요 dgh님 :D
수식 관련해서 궁금증이 생기셨나보네요
해당 수식은 주석의 내용과 같이 패럴럭스로 이동할 요소가 움직일 거리를 구하는 수식입니다.
해당 수식을 보게되면 parallaxMoveDistance 변수가 있는데요
이 변수에는 패럴럭스 요소가 시작할 위치값을 설정하도록 되어있습니다.
예를 들어 parallaxMoveDistance 값이 1000이라고 가정하겠습니다.
그렇다면 패럴럭스 요소는 1000위치부터 시작하겠죠??
그렇다면 종료될 위치는 어디일까요?
종료할 위치는 parallaxStartValue - parallaxStartValue 즉 1000-1000 = 0
이 되는겁니다.
그렇다면 패럴럭스 요소들은 1000에서 시작해서 0에서 끝나도록 되는거죠!
그다음 수식을 살펴보면 먼저 함수 Math.min을 사용하여 패럴럭스 시작 위치의 최대 값이 parallaxStartValue인 1000보다 커지지 않도록 값을 구한 거구요 다시 한번 Math.max를 사용해 패럴럭스로 이동할 거리가 패럴럭스가 종료할 위치 즉 (parallaxStartValue - parallaxStartValue)0보다 작은 값이 나오지 않도록 값을 구한 겁니다.
간단하게 설명한다면 다음 수식을 사용하여 1000~0 사이의 값을 구해서 1000~0 만큼만 패럴럭스 요소가 이동하도록 만든 겁니다 :)
도움이 되셨나요??
그럼 다른 궁금증이 생길때 문의주세요 :D
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
0
197
1
반응형에 대해 질문이 있습니다 !
0
366
1
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
0
379
1
함수가 정의되기 전에 함수 호출
0
344
1
섹션12 보너스 챕터에 관한 질문입니다!
0
468
1
5-3-1 강좌 섹션 질문 합니다.
0
312
1
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
1
463
3
화면 높이 관련 질문 있습니다.
1
433
1
선생님
0
370
1
5-2 vanilla.html 질문합니다.
0
422
1
5-3-2 질문입니다.
1
293
1
5-2 추가 질문이요
0
345
2
5-2 ! 질문이요.
0
266
1
안녕하세요!
0
272
1
질문드립니다.
1
366
2
질문드립니다.
0
1664
3
색션6강 카운트관련 문의드립니다!
0
238
1
섹션5 관련 질문드립니다.
0
261
1
setProperty 를 재활용 하고싶습니다.
0
210
1
IntersectionObserver
0
255
1
offsetheight와 scrollheight
0
398
1
완성된코드를 그대로 가져왔는데 크기가 이상해요
0
428
2
2:56에 10씩 증가시키는건 어떻게 하신건가요?
0
316
1
<script>에 $(function(){})으로 감싸준 이유
0
207
1