スクロールで少しずつdiv要素を縮小したい

実現したいこと

例えば、transform:scale(3)が初期値の要素があって、それを下スクロールで徐々にscale(1)にしたいです。要素のサイズを3倍〜1倍までをスクロールによって制御したい。

イメージはこのサイトの要素名data--04c20f4cです。
これは、size:40〜size:1までをスクロールで制御しています。

前提

趣味でWEBサイトを作成しているのですが、JSの実装部分でわからないことがありますので、質問させていただきます。

発生している問題・エラーメッセージ

特になし

該当のソースコード

現時点ではスクロールで要素のサイズをscale:(0)〜scale:(1)までを制御するところまではきています。
が、これをscale:(3)〜scale:(1)にする方法がわかりません。

HTML
1<body>
2  <div id="container">
3    <div id="box"></div>
4  </div>
5</body>

CSS
1body {
2  height: 2000px;
3  background: yellow;
4}
5
6#container {
7  width: 200px;
8  height: 200px;
9  border: 2px solid;
10  position: fixed;
11}
12
13#box {
14  width: 100%;
15  height: 100%;
16  background: red;
17}

JS
1window.onload = function(){
2    var box = document.getElementById('box'),
3    docHeight = document.documentElement.offsetHeight;
4    window.addEventListener( 'scroll', function() {            
5        var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
6            transformValue = 'scale('+scrolled+')';
7
8        box.style.WebkitTransform = transformValue;
9        box.style.MozTransform = transformValue;
10        box.style.OTransform = transformValue;
11        box.style.transform = transformValue;
12    }, false);
13}

試したこと

例えばこのようにして、初期値をscale:(3)にして、実装するとscale:(2)までしかいきません。

JS
1window.onload = function(){
2    var box = document.getElementById('box'),
3    docHeight = document.documentElement.offsetHeight,
4    transformValue = 3;
5    box.style.WebkitTransform = transformValue;
6    box.style.MozTransform = transformValue;
7    box.style.OTransform = transformValue;
8    box.style.transform = transformValue;
9
10    window.addEventListener( 'scroll', function() {            
11        var scrolled = 3 -(window.scrollY / ( docHeight - window.innerHeight ));
12        
13        transformValue = 'scale('+scrolled+')';
14
15        box.style.WebkitTransform = transformValue;
16        box.style.MozTransform = transformValue;
17        box.style.OTransform = transformValue;
18        box.style.transform = transformValue;
19    }, false);
20}

GSAPも試してみましたが、いまいちでした。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

回答1件

js
1        var scrolled = window.scrollY / ( docHeight - window.innerHeight ),

この式がスクロール量に従って 0 から 1 の値を計算しています。3 から 1 にするには、これを2倍して3から引けば良いでしょう。

js
1        scrolled = 3 - 2 * scrolled;

投稿2023/03/26 21:52

編集2023/03/27 00:20

int32_t

総合スコア18657

回答へのコメント

Rivermouth

2023/03/27 09:08

ご回答ありがとうございます！そういうことだったんですね、、ようやく謎が解け、先に進めそうです。ちなみに、このscrolledの式はなぜこのような形になるのでしょうか？縦方向のスクロール/(画面の全体サイズ - 画面の内側のサイズ)でなぜscale(0)〜scale(1)を求めることができるのでしょうか？追加の質問になってしまい申し訳ありませんが、これってなんでこうなるの?というのがイマイチ分かりません。。