JavaScript Academy · บทเรียน

แอนิเมชันที่ทำงานเมื่อเลื่อน

ทำให้องค์ประกอบเคลื่อนไหวเมื่อองค์ประกอบเข้าสู่มุมมอง

แอนิเมชันที่ทำงานเมื่อเลื่อน เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

การสร้างภาพเคลื่อนไหวเมื่อเลื่อน

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

ส่วนของ CSS

กำหนดสถานะเริ่มต้นที่ซ่อนอยู่และสถานะสิ้นสุดที่มองเห็นได้ใน CSS ส่วน JavaScript มีหน้าที่เพียงสลับคลาส การเปลี่ยนผ่านทั้งหมดเป็น CSS จึงช่วยให้การทำงานราบรื่น

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

การเลือกเป้าหมาย

กำกับองค์ประกอบที่ต้องการทำภาพเคลื่อนไหวด้วยคลาสร่วมกัน แล้วรวบรวมองค์ประกอบเหล่านั้น

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

การสร้างตัวสังเกตการณ์

ใช้เกณฑ์เพื่อให้ภาพเคลื่อนไหวเริ่มทำงานเมื่อมองเห็นองค์ประกอบในสัดส่วนที่มีความหมาย ไม่ใช่เพียงหนึ่งพิกเซล

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

การเพิ่มคลาส

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

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

ทำภาพเคลื่อนไหวเพียงครั้งเดียว

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

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

ทำภาพเคลื่อนไหวซ้ำทั้งสองทิศทาง

หากต้องการให้องค์ประกอบทำภาพเคลื่อนไหวออกเมื่อเลื่อนพ้น ให้สลับคลาสตามค่า isIntersecting และสังเกตองค์ประกอบต่อไป

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

เริ่มการสังเกต

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

items.forEach(el => observer.observe(el));

การทำให้ภาพเคลื่อนไหวเหลื่อมจังหวะ

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

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

การเคารพการเคลื่อนไหวที่ลดลง

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

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

ประโยชน์ด้านประสิทธิภาพ

เนื่องจากงานหนักถูกจัดการด้วยการเปลี่ยนผ่านของ CSS และการตรวจจับการมองเห็นถูกส่งต่อให้เบราว์เซอร์จัดการ ภาพเคลื่อนไหวขณะเลื่อนจึงยังคงราบรื่นแม้มีองค์ประกอบจำนวนมาก ไม่ต้องคำนวณจากเหตุการณ์การเลื่อน และไม่มีอาการกระตุก

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องภาพเคลื่อนไหวที่ทำงานเมื่อเลื่อน

สรุปทบทวน

คุณได้สร้างภาพเคลื่อนไหวที่ทำงานเมื่อเลื่อน:

กำหนดสถานะซ่อนและสถานะมองเห็นใน CSS
สังเกตเป้าหมายด้วย threshold ที่เหมาะสม
สลับคลาสเมื่อเกิดการตัดกัน โดยให้ CSS จัดการภาพเคลื่อนไหว
ใช้ unobserve สำหรับการแสดงเพียงครั้งเดียว
เคารพการตั้งค่า prefers-reduced-motion

คุณเรียนรู้เรื่องตัวสังเกตการตัดกันจบแล้ว ถัดไปคือเว็บเวิร์กเกอร์

คำถามที่พบบ่อย

บทเรียน “แอนิเมชันที่ทำงานเมื่อเลื่อน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แอนิเมชันที่ทำงานเมื่อเลื่อน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แอนิเมชันที่ทำงานเมื่อเลื่อน”

ทำให้องค์ประกอบเคลื่อนไหวเมื่อองค์ประกอบเข้าสู่มุมมอง คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “แอนิเมชันที่ทำงานเมื่อเลื่อน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy