แอนิเมชั่นอย่างง่ายโดยใช้ผู้สังเกตการณ์ทางแยก

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

ในบทความนี้ฉันจะแสดงให้คุณเห็นวิธีหนึ่งในการทำโดยใช้ Intersection Observer API

ฉันสร้างองค์ประกอบ div ด้วยชื่อคลาส "demo"

<div class="demo"><div>
 

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

“entry.target.classList.remove('left-right');” บรรทัดลบคลาสภาพเคลื่อนไหว .left-right เมื่อใดก็ตามที่องค์ประกอบ div ไม่ปรากฏในหน้าจอ จำการตั้งค่าแอนิเมชันของเราที่ 0% ที่เราตั้งค่า -90vh เพื่อให้มองเห็นได้ 10vh หรือไม่ สาเหตุที่เป็นเช่นนั้น ฟังก์ชันจาวาสคริปต์จะยังคงเห็นองค์ประกอบ div และคลาส .left-right จะไม่ถูกลบออกในขณะที่ภาพเคลื่อนไหวกำลังดำเนินการอยู่ หากคลาสแอนิเมชัน .left-right จะทำให้องค์ประกอบไม่สามารถมองเห็นได้ในหน้าจอในบางจุด มันจะให้ผลลัพธ์ที่แตกต่างออกไปเมื่อเรียกใช้ฟังก์ชัน สคริปต์ js จะไม่เห็นมันบนหน้าจอ ดังนั้นจะลบคลาสออก จากนั้นองค์ประกอบ div จะมีตำแหน่งเดิมกลับมา ซ้าย: 0vh ซึ่งมองเห็นได้ จากนั้นจะเรียกใช้ฟังก์ชันอีกครั้งและเพิ่มภาพเคลื่อนไหว จากนั้นจะมองไม่เห็นอีกครั้งเนื่องจากตำแหน่งเริ่มต้นของภาพเคลื่อนไหว คลาสจะถูกลบและเพิ่มครั้งแล้วครั้งเล่า คุณจะไม่เห็นกระบวนการแอนิเมชันอย่างที่คุณคาดหวัง คุณสามารถลบบรรทัด “entry.target.classList.remove('left-right');” หากคุณต้องการให้แอนิเมชั่นทำงานเพียงครั้งเดียว ก็ไม่เป็นไรหากคลาสที่มีแอนิเมชั่นของคุณจะทำให้มองไม่เห็นองค์ประกอบในบางจุด

นี่เป็นเพียงวิธีหนึ่งของแอนิเมชั่นตามตำแหน่ง/การมองเห็น การมีแอนิเมชั่นบนเว็บไซต์ของคุณดึงดูดและทำให้ผู้ชมอยู่ได้นานขึ้น