Bagaimanakah Saya Boleh Menghidupkan Elemen Hanya Apabila Mereka Memasuki Port Pandangan pada Tatal Halaman?

Elemen Animasi dalam Viewport pada Tatal Halaman

Dalam halaman web dengan berbilang elemen animasi, sukar untuk dikawal apabila animasi ini bermula. Untuk mencapai animasi tatal yang lancar, kami memerlukan cara untuk mencetuskannya hanya apabila elemen masing-masing kelihatan. Begini cara anda boleh mencapainya menggunakan API IntersectionObserver.

Menggunakan IntersectionObserver API

API IntersectionObserver memantau keterlihatan elemen berhubung dengan viewport atau elemen induk yang ditentukan. Kita boleh menggunakan ini untuk menogol animasi CSS apabila elemen kelihatan.

Coretan Kod

const inViewport = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach((el) => {
  Obs.observe(el, obsOptions);
});

Contoh Animasi CSS

Berikut ialah contoh cara menggunakan animasi pada elemen yang berada dalam paparan:

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

Kesimpulan

Dengan memanfaatkan IntersectionObserver API, kami kini boleh mengawal masa animasi kami, memastikan ia dimainkan apabila elemen yang sepadan kelihatan dalam port pandangan. Pendekatan ini memberikan pengalaman yang lancar dan menarik untuk pengguna semasa mereka menatal halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Elemen Hanya Apabila Mereka Memasuki Port Pandangan pada Tatal Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!