背景色とテキストの色を反転する

スクロールして指定の位置に来たら、背景色が反転、文字色も反転するようなアニメーションをつけます。

これはページ内のコンテナに背景色や画像を入れていない時のみ、うまく行きます。
（＝セクションの背景色が何もないことを推奨）
例えば背景が白で文字色が黒の場合、以下のコードを入れれば、指定位置で背景が黒に文字色が白になります。

1. 指定位置のコンテナをクラス名「invert」とし、HTMLタグをsectionにしておく

2. 文字色反転させたいテキストウィジットにクラス「text-invert」をつける。

3. 以下のCSS, JSを入れる

CSSコード

HTML

<style>
/* --- invert --- */
	body{
		transition:background-color 0.5s;
	}
	body:has(.invert.is-on){
		background-color:#333333 !important; /* 反転時のページ全体の背景色 */
	}
	body .text-invert *{
		transition:all 0.5s;
	}
	body:has(.invert.is-on) .text-invert *{
		color:#ffffff !important; /* 反転時の文字色 */
	}
</style>

<style>
/* --- invert --- */
	body{
		transition:background-color 0.5s;
	}
	body:has(.invert.is-on){
		background-color:#333333 !important; /* 反転時のページ全体の背景色 */
	}
	body .text-invert *{
		transition:all 0.5s;
	}
	body:has(.invert.is-on) .text-invert *{
		color:#ffffff !important; /* 反転時の文字色 */
	}
</style>

JSコード
（このコードの上にGSAP読み込みコードを入れてください。）

HTML

<script>
document.addEventListener('DOMContentLoaded', () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.utils.toArray('.invert').forEach(section => {
    ScrollTrigger.create({
      trigger: section,
      start: "top 70%",
      end: "bottom 70%",
      toggleClass: "is-on",
      
    });
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.utils.toArray('.invert').forEach(section => {
    ScrollTrigger.create({
      trigger: section,
      start: "top 70%",
      end: "bottom 70%",
      toggleClass: "is-on",
      
    });
  });
});
</script>