21.06.19 01:53 작성
·
300
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
5
2021. 06. 29. 13:35
앗 감사합니다 대현님- 저도 한번 확인해보아야 겠네요!
코드랑 영상을 수정하면서 여러번 작업하다보니 실수가 있었나 봅니다.
정말 감사합니다^^
2
0
0
감사합니다.
위 코드 기반으로 분기한 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