-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
main-add.js 코드 오류 있습니다. 이거 보고 수정하세요
21.06.19 01:53 작성 조회수 201
5
main-add.js 내용 적용했는데 section-2 부분의 messageC부분이 section3까지 넘어가서 뭔가 이상하다고 생각했습니다. 실제로, 강의 영상에 나온 것이랑 값이 차이나서 수정한 부분 올립니다. sceneInfo의 section2부분의 value만 변경해주시면 됩니다.
values: {
messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }],
messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }],
messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }],
messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }],
messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }],
messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }],
messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }],
messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }],
messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }],
messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }],
messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }],
messageC_opacity_out: [1, 0, { 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 }],
pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }],
pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }],
pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }],
pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }],
},
답변을 작성해보세요.
5
2
0
0
j j
2021.08.21
감사합니다.
위 코드 기반으로 분기한 playAnimation 아래꺼 쓰시면 됩니다
case 2:
// console.log('2 play');
if (scrollRatio <= 0.25) {
// in
objs.messageA.style.opacity = calcValues(
values.messageA_opacity_in,
currentYOffset
);
objs.messageA.style.transform = `translate3d(0, ${calcValues(
values.messageA_translateY_in,
currentYOffset
)}%, 0)`;
} else {
// out
objs.messageA.style.opacity = calcValues(
values.messageA_opacity_out,
currentYOffset
);
objs.messageA.style.transform = `translate3d(0, ${calcValues(
values.messageA_translateY_out,
currentYOffset
)}%, 0)`;
}
if (scrollRatio <= 0.565) {
// in
objs.messageB.style.transform = `translate3d(0, ${calcValues(
values.messageB_translateY_in,
currentYOffset
)}%, 0)`;
objs.messageB.style.opacity = calcValues(
values.messageB_opacity_in,
currentYOffset
);
objs.pinB.style.transform = `scaleY(${calcValues(
values.pinB_scaleY,
currentYOffset
)})`;
} else {
// out
objs.messageB.style.transform = `translate3d(0, ${calcValues(
values.messageB_translateY_out,
currentYOffset
)}%, 0)`;
objs.messageB.style.opacity = calcValues(
values.messageB_opacity_out,
currentYOffset
);
objs.pinB.style.transform = `scaleY(${calcValues(
values.pinB_scaleY,
currentYOffset
)})`;
}
if (scrollRatio <= 0.81) {
// in
objs.messageC.style.transform = `translate3d(0, ${calcValues(
values.messageC_translateY_in,
currentYOffset
)}%, 0)`;
objs.messageC.style.opacity = calcValues(
values.messageC_opacity_in,
currentYOffset
);
objs.pinC.style.transform = `scaleY(${calcValues(
values.pinC_scaleY,
currentYOffset
)})`;
} else {
// out
objs.messageC.style.transform = `translate3d(0, ${calcValues(
values.messageC_translateY_out,
currentYOffset
)}%, 0)`;
objs.messageC.style.opacity = calcValues(
values.messageC_opacity_out,
currentYOffset
);
objs.pinC.style.transform = `scaleY(${calcValues(
values.pinC_scaleY,
currentYOffset
)})`;
}
break;0
답변 5