Intersection Observerを使ったスクロールによるグラデーションの変化

• Intersection Observerは特定の要素が指定領域内に入ったかどうかを検知するAPI
• Intersection Observerのオプション「threshold」を使ってスクロール量による変化を起こしている。ターゲットがどのくらいの割合で見えているかを示す値。ターゲットとなる要素が見え始めた瞬間と見え終わりの瞬間が 0、半分通過したときは 0.5、すべて見えている状態が 1
• 上記「ターゲットがどのくらいの割合で見えているか」をもとに変化を出すため、ターゲットとなる要素にある程度の高さが必要。
• linear-gradientは要素の背景にグラデーションをつけるプロパティなので、テキスト本体のみにあてるには工夫が必要。background-clip: text;はテキストの型で背景をくり抜く記述。

background-image: linear-gradient(45deg,
      rgb(37, 47, 255) 0%,
      rgb(124, 192, 226) 100%,
      rgb(37, 47, 255) 200%);
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;