[JS 포트폴리오 만들기] scrolling 될 때 점점 home section 이 투명해지도록 만들기

2024.01.14

 

 

아래로 Scrolling 될수록 Y값이 변한다.

Opacity의 값은 1 ~ 0 사이의 값을 갖기 때문에, 1에서부터 시작해서 0까지 수렴하도록 만들면 된다.

이때 필요한 것은 수학공식!

 

home section의 높이에 비례하여 home section이 점점 투명해지도록 만드는 것이기 때문에 공식을 세워보면 된다.

 

일단 home Height가 100이라고 보자.

ScrollY	opacity
0	1
50	0.5
100	0

 

ScrollY가 homeHeight값에 가까워질수록 0에 수렴한다.

그럼, Y = Height * opacity 가 되면 된다.

그럼 opacity = Y / Height라는 공식이 완성된다.

 

 

따라서, 1에서부터 점점 opacy가 줄어드니, 1- Y / Height라고 하면 된다. 오호.