まず、上記の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を使用してスクロール時に画面に固定します.
スクロール時に透明度が徐々に低下するアニメーションを追加します.

不透明度の実装

(まず、例では、スクロールするとカードが1.不透明度、2.サイズが小さくなります.まず1番不透明度を実現します)

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

スクロールアニメーションのデフォルト設定は、前述のJavaScriptです.
これはよく見かけるコードです.「スクロール時に内部コードを実行してください~」
内部コードでは、(window).scrollTop();という関数を使用して、現在のウィンドウのスクロールバーの高さを示し、コンソールウィンドウに出力しようとしました.

現在のウィンドウのスクロールバーの高さを出力する理由

スクロールバーの高さが透明度を変化させるためです.
スクロールバーがある場所にスクロールすると、不透明度は0になります.
どこまで転がっているかを見つけたいだけで不透明性は1です.

そこで,コンソールウィンドウから現在のスクロールバーの高さを出力する際に測定を行った.
650 pxをスクロールすると、透明度は1になります.
900 pxをスクロールすると透明度は約0.5、
1150 pxをスクロールする場合は、透明度を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', ???);に設定されています.
1枚目のカードの不透明度は??こんなことになるの??このような固定値を0に設定することはできません.
???部分.
「スクロールバーの高さが650~1150の場合、1~0の可変値とする」
未知変数yで表現しておきましょう

$(window).scroll(function(){

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

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

});

Q.未知変数yを解き、「スクロールバーの高さが650～1150のときは1～0の可変値」とする。

1.「スクロールバーの高さが650～1150のときは1～0の可変値」yをグラフィックで表します。

高さが650から1150の間で変化する場合、1から0はそのような図形で表すことができる.
(ここでの高さは先ほど出力した高さ変数)
数学の用語で言えば、これは最初の関数と呼ばれています.

では、これを公式で表現しましょう。

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

yの最初の関数について,傾斜とは何かが分からないとき,まず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

では、このように代入してもいいですよね?
2つの方程式と2つの未知数があれば十分です.
練習場で方程式をよく解くと

//수학시간
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);

});

バーを下にスクロールする場合、不透明値は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を付与すればよい