Scroll / Opacity

2022 / 8 / 24 수

 

• Scroll값으로 opacity값 구하기
• RAP

---

✔️Scroll 값으로 Opacity값 구하기

 

목표 : Element의 css값(opacity)을 스크롤에 따라변경

 

1. 적용하고싶은 css값의 범위 ( 0.2~ 0.8 )

 

2. 스크롤값의 범위 ( 0 ~ 3000 ) 

 

                            ↓1500 (sectionYOffset)

스크롤값 0 -------------------------> 3000 (height)

                            ↓0.5

css값      0.2------------------------> 0.8

 

↓ 은 같이 움직임. 

스크롤값이 0이라면 css는 0.2

스크롤값이 3000이라면 css는 0.8

스크롤값이 1500이라면 css는 ???

 

비율구하기

rate = sectionYOffset / 전체 height

스크롤 rate = 1500 / 3000  → 0.5

result(구하고자하는 css값) = ( rate * (values[1] - values[0])) +values[0]

result  =  (0.5 *( 0.8 - 0.2)) + 0.2 (시작 값 0.2를 더해야 원하고자하는 결과값이 나옴)

 

∴ 스크롤값이 1500 이라면 css값은 0.5다 ~

 

    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;

    }

---

✔️RAP

1. 일정부분 스크롤시 상단메뉴바 블러처리, margin-bottom 길게 설정

2. 스크롤인터렉션 구현 - 진행 중 ( 투명했다가 점점 뚜렷해지도록 )