Hoạt hình đơn giản bằng cách sử dụng Trình quan sát giao lộ

Bạn có hoạt ảnh trong trang web của mình, nhưng vấn đề là vào thời điểm bạn cuộn đến phần đó, hoạt ảnh của bạn đã hoàn tất. Tất nhiên bạn muốn người dùng nhìn thấy hoạt ảnh của mình, vậy bạn sẽ trì hoãn hoạt ảnh như thế nào cho đến khi nó hiển thị với chế độ xem?

Trong bài viết này, tôi sẽ chỉ cho bạn một cách để làm điều đó bằng cách sử dụng Intersection Observer API.

Tôi đã tạo một phần tử div có tên lớp là “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('trái-phải');” dòng xóa hoạt ảnh lớp .left-right bất cứ khi nào phần tử div không hiển thị trên màn hình. Hãy nhớ rằng trên cài đặt hoạt ảnh của chúng tôi ở mức 0%, chúng tôi đã đặt -90vh để chúng tôi có thể hiển thị 10vh? Lý do là vì hàm javascript sẽ vẫn nhìn thấy phần tử div và lớp .left-right sẽ không bị xóa trong khi hoạt ảnh đang được xử lý. Nếu hoạt ảnh lớp .left-right làm cho phần tử không hiển thị trên màn hình tại một số điểm, thì nó sẽ cho bạn một kết quả khác khi hàm được gọi. Tập lệnh js sẽ không nhìn thấy nó trên màn hình do đó sẽ xóa lớp và sau đó phần tử div sẽ trở lại vị trí ban đầu, left: 0vh hiển thị, sau đó nó sẽ gọi lại hàm và thêm hoạt ảnh. Và sau đó nó sẽ ẩn đi một lần nữa do vị trí ban đầu của hoạt ảnh. Lớp sẽ bị xóa và thêm nhiều lần, bạn sẽ không thấy quá trình hoạt hình như bạn mong đợi. Bạn có thể xóa dòng “entry.target.classList.remove('left-right');” nếu bạn muốn hoạt ảnh chỉ chạy một lần, thì sẽ không sao nếu lớp có hoạt ảnh của bạn đôi khi làm cho phần tử không hiển thị.

Đây chỉ là một cách hoạt ảnh dựa trên vị trí/mức độ hiển thị. Có hình ảnh động trên trang web của bạn thu hút và khiến người xem ở lại lâu hơn.