[26일차] scroll 시 발생되는 이벤트 핸들러

20220825(목)

• 목차
  - scroll 할 때 발생되는 이벤트 핸들러
  - currentSection1

---

< scroll 할 때 발생되는 이벤트 핸들러 >

• 이벤트 핸들러 { 
  1. yOffset
  2. sectionYOffset
  scrollProc();
  }
• 스크롤 할때마다.
  1) yOffset 계산
  2) sectionyOffset 계산
  3) mode 설정
  4) scrollProc() 호출. ➡ playAnimation()

---

< currentSection1 >

• 스크롤 할 때 우리가 적용해야하는 css값을 계산해서 animation을 적용하기
  ➡ 한 범위 내에서만 Animation 돌게 하기

 

//현재 섹션에서 적용해야할 CSS값을 계산하는 함수.

    const calcValue = function(values)

    {

        let result;

        const height = sectionSet[currentSection].height;

        let rate;

        let partStart;      // 실제 start값

        let partEnd;        // 실제 end값

        let partHeight;     // 높이.

        if (values.length == 2)

        {

            rate = sectionYOffset / height;

            result = (rate * (values[1] - values[0])) + values[0];

        }

 

        // start, end값이 들어온 경우. [0, 1, {start: 0.1, end: 0.2}],

        else if (values.length === 3)

        {

            partStart = values[2].start * height;

            partEnd   = values[2].end * height;

            partHeight = partEnd - partStart;

            if (sectionYOffset < partStart)

            {

                result = values[0];

            }

            else if (sectionYOffset > partEnd)

            {

                result = values[1];

            }

            else

            {

                rate = (sectionYOffset - partStart) / partHeight;

                result = (rate * (values[1] - values[0])) + values[0]

               

            }

           

        }

        return result;

    }

    // 처음부터 끝까지 스크롤 할 때마다 계속 애니메이션이 진행되는데

    // 섹션별로 진행되는 애니메이션을 구별할 필요가 있다.

    const playAnimation = function()

    {

        const values = sectionSet[currentSection].vals;

        const objects = sectionSet[currentSection].objs;

        const scrollRate = sectionYOffset / sectionSet[currentSection].height;

        switch(currentSection)

        {

           // 0번 섹션의 애니메이션 처리

            case 0 :

                // 0.1 ~ 0.2

                if ((scrollRate > 0.09) && (scrollRate < 0.21))

                {

                    objects.messageA.style.opacity = calcValue(values.messageA_opacity_in);

                }

                // 0.25 ~ 0.3

                else if ((scrollRate > 0.24) && (scrollRate < 0.31))

                {

                    objects.messageA.style.opacity = calcValue(values.messageA_opacity_out);

                }

               

                break;

            case 1 :

                // 1번 섹션의 애니메이션 처리                            

                break;

        }

    }