วิธีสร้างพื้นหลังไล่สี (Gradient) เปลี่ยนตามการเลื่อนหน้าจอ (Scroll)

เทคนิค Gradient Background เปลี่ยนสีขณะ Scroll

เอฟเฟกต์นี้ทำให้พื้นหลังไล่สี (Gradient) เปลี่ยนไปเรื่อยๆ ขณะที่ผู้ใช้เลื่อนหน้าจอ (Scroll) ใช้ได้โดยการกำหนด height: 250vh ให้ body เพื่อสร้างพื้นที่เลื่อนยาว และใช้ linear-gradient หลายสี

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 250vh; /* สร้าง scrollbar ยาว */
      color: white;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(
        141deg,
        #a47dff 0%,
        #4e28a7 40%,
        #22053d 65%,
        #72a4ff 75%
      );
    }
  </style>
</head>
<body>
  <h1>ตัวอย่าง Gradient เปลี่ยนสีขณะ Scroll</h1>
  <p style="font-size: 30px;"> Lorem ipsum dolor sit amet consectetur adipisicing elit... </p>
  <h2 style="position:fixed;">เลื่อนหน้าจอเพื่อดูเอฟเฟกต์</h2>
</body>
</html>

หลักการทำงาน

• height: 250vh – ทำให้หน้าสูงกว่าจอ 2.5 เท่า บังคับให้มี scrollbar
• linear-gradient(141deg, ...) – กำหนดไล่สีทิศทาง 141 องศา มี 4 จุดสี (color stops)
• ขณะ scroll เบราว์เซอร์จะแสดงส่วนต่างของ gradient ตามตำแหน่ง scroll

ประยุกต์ใช้

เหมาะสำหรับ Landing Page, Hero Section, หรือหน้าที่ต้องการสร้างบรรยากาศไดนามิก สามารถปรับองศา จุดสี และความสูงได้ตามความต้องการ