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

(() => {

  let yOffset = 0; // window.pageYOffset 대신 쓸 변수
  let prevScrollHeight = 0; //
  let currentScene = 0; //
  let enterNewScene = false; // 새로운 Scene 이 시작도는 순간.

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

  function setLayout() {
    for (let i = 0; i < sceneInfo.length; i++) {
      sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; // A : 각 section height 값
      sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; // A값을 각 section에 적용.
    }
    document.body.setAttribute('id',`show-scene-${currentScene}`);
  }

  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; // 안써주면 undefined
  }
  function playAnimation() {
    const objs = sceneInfo[currentScene].objs;
    const values = sceneInfo[currentScene].values;
    const currentYOffset = yOffset - prevScrollHeight;
    const scrollHeight = sceneInfo[currentScene].scrollHeight;
    const scrollRatio = currentYOffset / scrollHeight;

    switch (currentScene) {
      case 0 :
          // console.log('0 play');
          const messageA_opacity_in = calcValues(values.messageA_opacity_in, currentYOffset);
          const messageA_opacity_out = calcValues(values.messageA_opacity_out, currentYOffset);

          if (scrollRatio <= 0.22) {
            // in
              objs.messageA.style.opacity = messageA_opacity_in;
          } else {
            // out
              objs.messageA.style.opacity = messageA_opacity_out;
          }

          break;

      case 1 :
          // console.log('1 play');
          break;

      case 2 :
          // console.log('2 play');
          break;

      case 3 :
          // console.log('3 play');
          break;
    }

  }

  function scrollLoop() {
    enterNewScene = false;
    prevScrollHeight = 0;
    for (let i = 0; i < currentScene; i++) {
        prevScrollHeight += sceneInfo[i].scrollHeight;
      }

    if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
      enterNewScene = true;
      currentScene++;
      document.body.setAttribute('id',`show-scene-${currentScene}`);
    }

    if (yOffset < prevScrollHeight) {
      enterNewScene = true;
      if (currentScene === 0) return;
      currentScene--;
      document.body.setAttribute('id',`show-scene-${currentScene}`);
    }
    // console.log(currentScene);
    if (enterNewScene) return;

    playAnimation();

  }

  window.addEventListener('resize',setLayout);
  window.addEventListener('scroll',() => {
    yOffset = window.pageYOffset;
    scrollLoop();
  });

  setLayout();

})();