iPhoneXのページのような効果で文字を背景にする

したいこと

iPhoneXの公式ページ(既に削除されているのでアーカイブです)では、Xの文字がスクロールで拡大されて画像になっています。
スクロール後にiPhoneXの画像が出てきますがこれを別の画像にしてそのままページの背景にしたいです。

試した事

JavaScriptでスクロール量を取得して変数に入れて、その変数 * 10000 + 'rem;'を対象の文字のサイズにしました。
これでできるはずですが、なぜかできませんでした。
また余計にスクロールされました(CSSで調整すると何故か文字が消える)

JavaScript
1window.onload = function(){
2  setInterval("scroll()", 100);
3}
4function scroll() {
5var y = window.pageYOffset ;
6}
7$(function() {
8var y = window.pageYOffset ;
9    $("#example").css({
10        "font-size": y * 10000 + 'rem'
11    });
12});

html
1<div id="example">X</div>

CSS
1#example {
2   color: transparent;
3   -webkit-text-fill-color: transparent;
4   background: url('photo.png');
5   background-position: center;
6   -webkit-background-clip: text;
7   background-clip: text;
8}

注意点(?)

jQueryを利用しています。
出来るだけ多くの環境でできるものをお願いします。
初心者で簡単なところでミスとかしてるかもです。

行動規範の内容に同意します

回答1件

直接の回答ではありません。
「jQuery スクロールイベント」とかで検索してスクロールイベント処理について調べてみてください。

js
1window.onload = function(){
2//setInterval("scroll()", 100); // 書き方が古いです。参考書があるならそれ自体が古すぎる可能性があります。
3  setInterval( scroll, 100 );
4}
5function scroll() { // setIntervalで定期的に呼び出しているだけで何の処理もしていない
6var y = window.pageYOffset ; // インデントが無い
7}
8$(function() { // ページの読み込みが完了したらこの中が実行されるが、1度しか呼ばれない（スクロールと関係なく1回実行されるだけ）
9var y = window.pageYOffset ; // インデントが無い
10    $("#example").css({
11        "font-size": y * 10000 + 'rem'
12    });
13});