인프런 커뮤니티 질문&답변

안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다.

 const sectionInfo = [
    {
      // section-0
      type: "sticky",
      heightNum: 5,
      scrollHeight: 0,
      objs: {
        container: document.querySelector("#scroll-section-0"),
        messageA: document.querySelector("#scroll-section-0 .main-message.a"),
        messageB: document.querySelector("#scroll-section-0 .main-message.b"),
        messageC: document.querySelector("#scroll-section-0 .main-message.c"),
        messageD: document.querySelector("#scroll-section-0 .main-message.d"),
      },
      values: {
        messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }],
        messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }],
        messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }],
        messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }],
        messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }],
        messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }],
        messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }],
        messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }],
        messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }],
        messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }],
        messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }],
        messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }],
        messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }],
        messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }],
        messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }],
        messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }],
      },
    },
  ];

  function calcValues(values, currentScrollY) {
    let returnValue;

    const currentSectionHeight = sectionInfo[currentSection].scrollHeight;
    // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식
    const scrollRatio = currentScrollY / currentSectionHeight;

    if (values.length === 3) {
      const scrollAniStart = values[2].start * currentSectionHeight;
      const scrollAniEnd = values[2].end * currentSectionHeight;
      const scrollAniHeight = scrollAniEnd - scrollAniStart;

      if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) {
        returnValue =
          ((currentScrollY - scrollAniStart) / scrollAniHeight) *
            (values[1] - values[0]) +
          values[0];
      } else if (currentScrollY < scrollAniStart) {
        returnValue = values[0];
      } else if (currentScrollY > scrollAniEnd) {
        returnValue = values[1];
      }
    } else {
      returnValue = scrollRatio * (values[1] - values[0]) + values[0];
    }

    return returnValue;
  }

  function playAnimation() {
    const objs = sectionInfo[currentSection].objs;
    const values = sectionInfo[currentSection].values;
    const currentScrollY = scrollY - prevScrollHeight;
    const currentSectionHeight = sectionInfo[currentSection].scrollHeight;
    const scrollRatio = currentScrollY / currentSectionHeight;

    switch (currentSection) {
      case 0:
        // message
        if (scrollRatio <= 0.05) {
          objs.messageA.style.opacity = calcValues(
            values.messageA_opacity_in,
            currentScrollY
          );
        } else {
          objs.messageA.style.opacity = calcValues(
            values.messageA_opacity_out,
            currentScrollY
          );
          objs.messageA.style.transform = `matrix(${calcValues(
            values.messageA_scale_in,
            currentScrollY
          )}, 0, 0, ${calcValues(
            values.messageA_scale_in,
            currentScrollY
          )}, 0, 0)`;
        }