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

초반부 messageA_opacity_in 을 콘솔로 찍었는데요,

partScrollStart보다 currentYOffset이 작을때는

rv에 values[0] 즉 '0'을 리턴해야하는데,

그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다...

const sceneInfo = [
    {
      //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: [0, 1, { start: 0.1, end: 0.2}],
        messageB_opacity: [0, 1, { start: 0.3, end: 0.4}]
      }
    },
    {
      //1
      type:'normal',
      heightNum:5,//브라우저 높이의 배수 세팅
      scrollHeight:0, //각 씬의 스크롤 높이
      objs:{
        container: document.querySelector('#scroll-section-1')
      }
    },
    {
      //2
      type:'sticky',
      heightNum:5,//브라우저 높이의 배수 세팅
      scrollHeight:0, //각 씬의 스크롤 높이
      objs:{
        container: document.querySelector('#scroll-section-2')
      }
    },
    { 
      //3
      type:'sticky',
      heightNum:5,//브라우저 높이의 배수 세팅
      scrollHeight:0, //각 씬의 스크롤 높이
      objs:{
        container: document.querySelector('#scroll-section-3')
      }
    }
  ];

function calcValues(values, currentYOffset){
    let rv;
    const scrollHeight = sceneInfo[currentScene].scrollHeight
    const scrollRatio = currentYOffset / scrollHeight
    if(values.length === 3){
      // start ~ end 사이의 애니메이션 실행
      const partScrollStart = values[2].start * scrollHeight;
      const partScrollEnd = values[2].end * scrollHeight;
      const partScrollHeight = partScrollEnd - partScrollStart;

      if(currentYOffset => partScrollStart && currentYOffset <= partScrollEnd){
        rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0];
      } else if (currentYOffset < partScrollStart){
        rv = values[0];
      } else if (currentYOffset > partScrollEnd){
        rv = values[1];
      }
    } else {
      rv = scrollRatio * (values[1] - values[0]) + values[0];
    }
    

    return rv;
  }

  function playAnimation(){
    const objs = sceneInfo[currentScene].objs;
    const values = sceneInfo[currentScene].values;
    const currentYOffset = yOffset - prevScrollHeight;
    
    switch (currentScene){
      case 0:
        let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset)
        objs.messageA.style.opacity = messageA_opacity_in
        console.log(messageA_opacity_in)    
        break;
      case 1:
        break;
      case 2:
        break;
      case 3:
        break;
    }
  }
  

도와주세요 ㅠ