-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
values의 수치에 관해서
21.06.05 19:55 작성 조회수 136
0
values: {
messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}],
messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}],
messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}],
messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}],
messageB_opacity_in: [0, 1, {start: 0.5, end: 0.55}],
messageB_opacity_out: [1, 0, {start: 0.58, end: 0.63}],
messageB_translateY_in: [20, 0, {start: 0.5, end: 0.55}],
messageB_translateY_out: [0, -20, {start: 0.58, end: 0.63}],
messageC_opacity_in: [0, 1, {start: 0.72, end: 0.77}],
messageC_opacity_out: [1, 0, {start: 0.85, end: 0.9}],
messageC_translateY_in: [20, 0, {start: 0.72, end: 0.77}],
messageC_translateY_out: [0, -20, {start: 0.85, end: 0.9}],
pinB_scaleY: [0.5, 1, {start: 0.5, end: 0.55}],
pinC_scaleY: [0.5, 1, {start: 0.72, end: 0.77}],
}위의 코드는 동영상을 보면서 작성한 코드이구요
messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}],
messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}],
messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}],
messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}],
messageB_opacity_in: [0, 1, {start: 0.6, end: 0.65}],
messageB_opacity_out: [1, 0, {start: 0.68, end: 0.73}],
messageB_translateY_in: [20, 0, {start: 0.6, end: 0.65}],
messageB_translateY_out: [0, -20, {start: 0.68, end: 0.73}],
messageC_opacity_in: [0, 1, {start: 0.87, end: 0.92}],
messageC_opacity_out: [1, 0, {start: 0.95, end: 1}],
messageC_translateY_in: [20, 0, {start: 0.87, end: 0.92}],
messageC_translateY_out: [0, -20, {start: 0.95, end: 0.1}],
pinB_scaleY: [0.5, 1, {start: 0.6, end: 0.65}],
pinC_scaleY: [0.5, 1, {start: 0.87, end: 0.92}],위의 코드는 수치를 변경해서 작성한 코드입니다.
제일 위의 코드를 사용했을 땐 .pin이 out되지 않는 현상이 나타났는데 아래의 코드를 사용하니 .pin의 out 애니메이션이 정상적으로 동작하더군요
왜 이런 차이가 나는지 궁금합니다.
답변을 작성해보세요.
1
1분코딩
지식공유자2021.06.14
아시다시피 start와 end 값은 해당 구간에서의 스크롤 된 비율의 기준점인데, 아마 CSS 또는 어떤 부분의 차이로 인식되는 비율에 약간 차이가 발생한 것 같습니다.
스크롤 할 때마다 console.log로 scrollRatio를 출력해보시면서 변화되는 수치를 살펴보시면서 입력하신 값과 변화되는 시점에 차이가 없다면 별 문제 없을 것으로 보입니다^^
답변 1