위 UI를 만들기 위해 일단 HTML 준비

깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후
이미지 3개를 다음과 같이 배치합니다.

<div class="card-background">
  <div class="card-box">
    <img src="카드이미지1경로">
  </div>
  <div class="card-box">
    <img src="카드이미지2경로">
  </div>
  <div class="card-box">
    <img src="카드이미지3경로">
  </div>
</div>

.card-background {
  height: 3000px;
  margin-top: 800px;
  margin-bottom: 1600px;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}
.card-box {
  position: sticky;
  top: 400px;
  margin-top: 200px;
}

겁나 긴 배경에 카드를 세로로 3개 배치했고,
position : sticky를 이용해서 스크롤시 화면에 고정되게 만들었습니다.

스크롤시 opacity가 점점 줄어드는 애니메이션도 첨가해보도록 합시다.

opacity 구현

(일단 예제를 보면 스크롤을 내릴 때 카드가 1. opacity가 변하고 2. 사이즈가 줄어듭니다. 일단 1번 opacity만 구현해보도록 합시다)

$(window).scroll(function(){
    var 높이 = $(window).scrollTop();
    console.log(높이);
});

스크롤 애니메이션의 기본은 위와 같은 자바스크립트입니다.
많이 보던 "스크롤시 내부 코드를 실행해주세요~" 라는 코드입니다.

내부 코드엔 현재 창의 스크롤바 높이를 알려주는 (window).scrollTop(); 이라는 함수를 써본 뒤에 콘솔창에 출력을 해보았습니다.

현재 창의 스크롤바 높이를 왜 출력함?

왜냐면 현재 스크롤바 높이에 따라 opacity가 변하니까
스크롤바가 어디까지 스크롤 되면 opacity가 0이고
어디까지 스크롤 되면 opacity가 1인지 찾고 싶어서 그런거임

그래서 콘솔창에 현재 스크롤바 높이를 출력하면서 측정해보았습니다.

650px 쯤 스크롤하면 opacity를 1로,
900px 쯤 스크롤하면 opacity를 대충 0.5로,
1150px 쯤 스크롤하면 opacity를 0으로 설정하면 좋을 것 같습니다.

이걸 코드로 표현해보도록 합시다.

$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);
        
// 650~1150까지 스크롤바를 내리면,
// 첫째카드의 opacity 1~0으로 서서히변경해주셈
  $('.card-box').eq(0).css('opacity', ???);

});

스크롤바를 내릴 때, $('.card-box').eq(0).css('opacity', ???); 이렇게 코드가 동작하도록 설정했습니다.

첫카드의 opacity를 ???로 변하게 해야되는데 ???는 0 이런 고정된 값으로 설정할 수 없을 것 같습니다.

???부분은
"스크롤바높이가 650~1150이 될 때 1~0이 되는 가변적인 값"이 되어야하겠죠?

그래서 일단 미지의 변수인 y라고 표현합시다.

$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);

  var y = 미지의 변수;
  $('.card-box').eq(0).css('opacity', y);

});

Q. "스크롤바높이가 650~1150이 될 때 1~0이 되는 가변적인 값"인 미지의 변수 y를 구해보십시오.

1. "스크롤바높이가 650~1150이 될 때 1~0이 되는 가변적인 값" y는 그래프로 표현해보면 이렇습니다.

높이가 650~1150 이렇게 변할 때 1에서 0이 되는건 저런 그래프로 표현할 수 있을 것 같습니다.
(여기서 높이라는건 아까 출력해본 높이 변수입니다)

이걸 수학용어로 1차함수라고 부릅니다.

2. 그럼 이걸 수식으로 표현해봅시다.

//수학시간
y = a * 높이 + b

y에 대한 1차함수는 우리가 뭐 기울기 이런걸 모를 때 일단 ax+b 이런 식으로 표현할 수 있다고 배웠습니다.

그럼 a랑 b라는 미지수만 잘 구하면 y가 뭔지 알 수 있는거네요?

a는 전문용어로 기울기, b는 전문용어로 y절편이라고 합니다만
그건 너무 어려우니 우리는 대입법을 이용해보도록 합시다.

3. a,b를 구하는건 대입법을 이용합니다.

위의 함수는

높이가 650일 때 y가 1,

높이가 1150일 때 y가 0입니다.

//수학시간
1 = a * 650 + b
0 = a * 1150 + b

그럼 이렇게 대입해봐도 맞겠죠?

방정식이 두개고 미지수가 두개면 충분히 풀 수 있습니다.

그래서 연습장에 방정식을 잘 풀어보시면

//수학시간
1 = a * 650 + b
0 = a * 1150 + b

a = -1/500
b = 115/50

이렇게 나옵니다. 분수를 약분하고 그런건 필요없습니다.
그럼 a와 b값을 아까 y를 표현하던 수식에 대입하면

//다시 자바스크립트 
var y = -1/500 * 높이 + 115/50

이렇게 되겠습니다.

그럼 y를 구했으니 아까 코드를 이렇게 업데이트 할 수 있겠군

$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);

  var y =  -1/500 * 높이 + 115/50;
  $('.card-box').eq(0).css('opacity', y);

});

스크롤바 내려보시면 opacity라는 값이 y에 의해서 결정됩니다.

y는 스크롤 높이가 변할 때마다 매번 바뀌기 때문에
아까와 같은 UI를 구현가능한 것입니다

카드가 0.9배 정도로 서서히 작아지는 애니메이션 구현

지금까지 카드 투명도가 서서히 변하는걸 구현해 봤는데

현재 창을 650~1150만큼 스크롤 했을 때 카드의 크기가 1에서 0.9로 작아지도록 만들어주시면 됩니다.

사이즈를 줄이는건 transform : scale(0.9) 이런 속성을 이용하시면 되겠습니다.

그런데 0.9를 그대로 박아넣는게 아니라
미지의 변수 z같은걸 만들어서

z = a * 높이 + b 이렇게 수식을 세운 뒤

높이가 650일 때 z는 1,
높이가 1150일 때 z는 0.9 이니까

대입법으로 a와 b라는 상수를 구하면

$(window).scroll(function(){

  var 높이 = $(window).scrollTop();
  console.log(높이);

  var y =  -1/500 * 높이 + 115/50;
  $('.card-box').eq(0).css('opacity', y);

  var z = (-1/5000) * 높이 + 565/500;
  $('.card-box').eq(0).css('transform', `scale( ${z} )`);

});

스크롤바 내려보시면 transform : scale(z) 이라는 값이 z에 의해서 결정됩니다.
${} 이 기호는 글자 중간중간에 변수 삽입 스킬입니다.

그리고 더 부드러운 동작을 원하면

card-box라는 div에 transition : all 0.2s 같은걸 부여해주시면 되겠습니다.