샐렉터에 가변적인 값 주기

스크롤을 내리는 정도에 따른 투명도,크기 등 샐랙터의 변화를 주는 방법을 배웠다. 값을 구할때에는 약간의 수학적인 요소가 들어간다.

함수로 계산하다보면 구해야 하는 값이 -1/5000, 4973/263 처럼 복잡하게 나오는데, 함수계산기로 쉽게 구할 수 있다. 함수계산기는 아래 링크 참조!

먼저 1차함수 y = ax +b; 의 값을 구해야 한다.

1. 변화를 희망하는 스크롤의 두가지 값을 구한다.
   값을 2개나 구하는 이유는 변화의 시작과 종료를 구하기 위함이다.콘솔창을 통해 값은 쉽게 구할 수 있다.
   구한 스크롤의 값은 위 방정식의 x의 값이 된다.

2. y의 값은 스크롤이 내려갈 때마다 변화를 희망하는 샐랙터의 값이다. opacity로 예를 들면,
   스크롤 1500일때 opacity는 1, 스크롤 2000일때는 0을 희망한다면, y의 값은 0,1이 된다.

3. x와 y의 값을 정했다면 방정식은 다음과 같은 식일 것이다
   1 = 1500a + b
   0 = 2400a + b
   이때 a는 기울기를 뜻하고, b는 절편을 뜻한다.
   a,b의 값은 계산기를 사용한다.

4. 값을 구한 이후에 ('opacity', y)의 자리에 넣어주면 된다.

사용 예시

let height = $(window).scrollTop(); //윈도우 스크롤 구하기
let z = (-1 / 374) * height + 1512 / 187;
$('.bus-card').eq(0).css('opacity', z); / 구한 값 입력

방정식 계산기 프로그램
https://ko.numberempire.com/equationsolver.php