แอนิเมชันแสดงผลเมื่อเลื่อนหน้าจอ [IntersectionObserver]

👀 実行デモ

💡 วิธีใช้งานและข้อดีของเทมเพลตนี้

เทมเพลตนี้จะทำให้องค์ประกอบแสดงผลด้วยแอนิเมชันอย่างนุ่มนวลเมื่อเข้าสู่พื้นที่การแสดงผลบนหน้าจอ

• ✅ ช่วยดึงดูดสายตาผู้ใช้ได้อย่างเป็นธรรมชาติ (ไม่พลาดเนื้อหา)
• ✅ เพิ่มความน่าอ่านโดยไม่แสดงเนื้อหาทั้งหมดในครั้งเดียว
• ✅ สามารถใช้ IntersectionObserver เพื่อโหลดภาพหรือกราฟแบบ Lazy Load ได้
• ✅ น้ำหนักเบาและปรับแต่งง่าย เหมาะกับหน้า Landing Page, รายการสินค้า, คำถามที่พบบ่อย ฯลฯ
• ✅ แค่เพิ่มแอนิเมชันนุ่มนวลก็ช่วยเพิ่มความน่าสนใจของเว็บไซต์ได้มาก

สามารถปรับความเร็วและระยะของแอนิเมชันได้ง่ายด้วย CSS เพื่อให้เหมาะกับสไตล์ของคุณ

📋 โค้ดสำหรับคัดลอก

<style>
.box {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 1rem 0;
  font-size: 1.5rem;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="box fadein">🍎 Apple</div>
<div class="box fadein">🍊 Orange</div>
<div class="box fadein">🍌 Banana</div>
<div class="box fadein">🍇 Grape</div>
<div class="box fadein">🍉 Watermelon</div>

<script>
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // หากคุณต้องการแสดงเพียงครั้งเดียว
    }
  });
});
document.querySelectorAll(".fadein").forEach(el => observer.observe(el));
</script>

      📋 คัดลอก
    

🧩 วิธีการทำงานของ IntersectionObserver และเคล็ดลับการใช้งาน

IntersectionObserver คือ API ของเบราว์เซอร์ที่ช่วยให้สามารถตรวจจับได้ว่าองค์ประกอบใดเข้าสู่พื้นที่ที่มองเห็นได้ของหน้าจอ (viewport) เมื่อเทียบกับการใช้ scroll แบบดั้งเดิมแล้ว จะมีประสิทธิภาพดีกว่าและเบากว่า เหมาะสำหรับการเพิ่มประสิทธิภาพของแอนิเมชัน

🔍 ใช้งานได้ที่ไหนบ้าง?

นอกจากการแสดงผลแบบเคลื่อนไหวแล้ว ยังสามารถใช้เพื่อโหลดรูปภาพหรือวิดีโอแบบ Lazy Load, การแสดงโฆษณาแบบแทรก และฟังก์ชันอื่น ๆ อีกมากมาย

⚙ เคล็ดลับการใช้งาน

เพื่อรักษาประสิทธิภาพ ควรใช้ unobserve() เพื่อหยุดสังเกตองค์ประกอบหลังจากที่แสดงแล้ว หากมีหลายองค์ประกอบให้ใช้ querySelectorAll() ร่วมกับลูปเพื่อผูก Observer กับแต่ละรายการ

เมื่อใช้ร่วมกับแอนิเมชัน IntersectionObserver จะช่วยยกระดับภาพลักษณ์ของเว็บไซต์ให้ดูน่าสนใจยิ่งขึ้น อย่าลืมปรับแต่งคุณสมบัติ transform และ transition ใน CSS เพื่อให้ได้เอฟเฟกต์ที่ดีที่สุด