<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>gsap.registerPlugin(ScrollTrigger);
gsap.set('#text2', { opacity: 0 })
gsap.to("#text2", {
scrollTrigger: {
trigger: "#box2",
start: "top",
end: "bottom",
scrub: false,
},
opacity: 1,
});
External CSS
This Pen doesn't use any external CSS resources.