<h1 id="heading">恐るべきスピード。</h1>
<p id="paragraph">M1アーキテクチャの卓越したパフォーマンスを、プロユーザーのためにまったく新しいレベルに進化させるチップ。それが、M1 Proです。最大10個のCPUコア。最大16個のGPUコア。16コアのNeural Engine。そしてH.264、HEVC、ProResコーデックに対応する専用のエンコードとデコード用メディアエンジン。どんなに壮大なプロジェクトでも簡単に形にできます。</p>

<p class="scroll">↓ スクロール ↓</p>

#heading {
  background-image: linear-gradient(
    45deg,
    rgb(37, 47, 255) 0%,
    rgb(124, 192, 226) 100%,
    rgb(37, 47, 255) 200%
  );
  font-size: 4rem;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
#paragraph {
  font-size: 21px;
  color: #a1a1a6;
  line-height: 1.4;
}

body {
  background: #000;
  padding: 100vh 1rem;
  font-weight: 600;
  font-family: "SF Pro JP", sans-serif;
}
.scroll {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  color: #fff;
}

// 着火点となる要素
const p = document.getElementById("paragraph");

const options = {
  threshold: buildThresholdList()
};

// 実行するよ
const observer = new IntersectionObserver(showElements, options);

// p に到達したら発動
observer.observe(p);

// threshold の設定
function buildThresholdList() {
  let thresholds = [];
  let numSteps = 20;

  for (let i = 1; i <= numSteps; i++) {
    let ratio = i / numSteps;
    thresholds.push(ratio);
  }
  return thresholds;
}

// 要素が表示されたら実行する動作
function showElements(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let ratio = Math.round(entry.intersectionRatio * 100);

      const heading = document.getElementById("heading");
      heading.style.backgroundImage = `
        linear-gradient(
        45deg,
        rgb(37, 47, 255) ${0 - ratio}%,
        rgb(124, 192, 226) ${100 - ratio}%,
        rgb(37, 47, 255) ${200 - ratio}%
      )`;
    }
  });
}