[25일차] Opacity로 Animation 효과

20220824(수)

• 목차
  - Opacity로 Animation 효과

---

< Opacity 적용하기 >

 

Dorothy 작업

 

• 목표
  : element의 CSS값(opacity)을 스크롤에 따라 변경되는 코드짜기
• 스크롤값(높이)과 css값이 같은 비율로 움직이므로, 높이 값의 비율을 구한 후 ➡ css 값의 범위를 정한다.

    // 이전 섹션의 높이 구하기

    const getPrevSectionHeight = function()

    {

        let prevHeight = 0;

        for (let i = 0; i < currentSection; i++)

        {

            prevHeight = prevHeight + sectionSet[i].height;

        }

       

        return prevHeight;

    }

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

    const calcValue = function(values)

    {

        let result;

        const height = sectionSet[currentSection].height;

        const rate = sectionYOffset / height;

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

        return result;

    }