5-3-2 계산식 질문 드립니다.
193
작성자 없음
작성한 질문수 0
안녕하세요? 강사님
해당 강의 중 챕터 수식에 해당하는 부분이 이해가 가지 않아 질문드립니다.
parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100))));
=> parallaxStartValue - (parallaxStartValue * (parallaxPercent/100))
위의 계산식 중에 min 계산부분이 이해가 가지 않습니다.
왜 저런 계산식이 나왔는지 의문이여서 질문드려요 ㅜㅜㅜ
답변 1
0
안녕하세요
먼저 사칙연산에서 나누기를 가장 먼저 계산하죠??
백분율을 구한 값에서 parallaxPercent/100 을해 값을 다시 되돌립니다.
즉 이값은 parallaxThisTop / parallaxSpeed
패럴럭스의 시작위치에서 스피드 즉 패럴럭스 될 거리를 나눈 값이죠!
그럼 이 값은 스크롤을 진행하는 동안 스크롤 영역 안에서 항상 0~1 사이의 값이 나올겁니다. 로그를 찍어보세요!
console.log(parallaxThisTop / parallaxSpeed)
로그를 찍어봤다면 스크롤 영역안에서 0에서 1의 값이 나오는걸 알 수 있을겁니다.
그다음 이 값에 parallaxStartValue 즉 1000을 곱해주는겁니다.
그럼 1000을 곱했으니 스크롤을 진행하는 동안 결과 값은 0부터 시작해서 1000에서 끝나게 되겠죠?
그다음 parallaxStartValue 즉 1000 에서 다시 위 값을 빼주는겁니다.
그럼 어떤 값이 나올까요?
1000 - 1 = 999
1000 - 2 = 998
1000 - 10 = 990
1000 - 100 = 900
1000 - 1000 = 0
즉 1000에서 0 사이의 값이 나오는거죠! 그리고 패럴럭스 엘리먼트에 값을 대입한다면??
패럴럭스될 요소들은 1000에서 시작해서 0까지 움직이게 되는겁니다.
그리고 Math객체의 min 메소드는 왼쪽과 오른쪽의 값을 비교해 더 작은 값을 찾아 줍니다.
즉 두값중에 -값이 나올경우 항상 0 이 나오도록 처리한거죠
:)
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
0
213
1
반응형에 대해 질문이 있습니다 !
0
384
1
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
0
388
1
함수가 정의되기 전에 함수 호출
0
355
1
섹션12 보너스 챕터에 관한 질문입니다!
0
478
1
5-3-1 강좌 섹션 질문 합니다.
0
325
1
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
1
483
3
화면 높이 관련 질문 있습니다.
1
442
1
선생님
0
378
1
5-2 vanilla.html 질문합니다.
0
430
1
5-3-2 질문입니다.
1
302
1
5-2 추가 질문이요
0
362
2
5-2 ! 질문이요.
0
271
1
안녕하세요!
0
279
1
질문드립니다.
1
372
2
질문드립니다.
0
1680
3
색션6강 카운트관련 문의드립니다!
0
246
1
섹션5 관련 질문드립니다.
0
273
1
setProperty 를 재활용 하고싶습니다.
0
219
1
IntersectionObserver
0
261
1
offsetheight와 scrollheight
0
402
1
완성된코드를 그대로 가져왔는데 크기가 이상해요
0
437
2
2:56에 10씩 증가시키는건 어떻게 하신건가요?
0
320
1
<script>에 $(function(){})으로 감싸준 이유
0
212
1