<div id="box1" class="h-screen bg-red-500 text-white flex items-center justify-center text-2xl">
  <p id="text1">這是第一頁</p>
</div>
<div id="box2" class="h-screen bg-yellow-500 text-white flex items-center justify-center text-2xl">
  <p id="text2">這是第二頁</p>
</div>
<div id="box3" class="h-screen bg-purple-500 text-white flex items-center justify-center text-2xl">
  <p id="text3">這是第三頁</p>
</div>
<div id="box4" class="h-screen bg-green-500 text-white flex items-center justify-center text-2xl">
  <p id="text4">這是第四頁</p>
</div>
<div id="box5" class="h-screen bg-sky-500 text-white flex items-center justify-center text-2xl">
  <p id="text5">這是第五頁</p>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js