Bagaimanakah saya boleh menghidupkan elemen hanya apabila ia berada dalam viewport menggunakan API CSS3 dan IntersectionObserver?

Animate Elements in Viewport

Dalam CSS3, anda boleh menambah animasi pada elemen HTML untuk menjadikannya bergerak atau menukar penampilan apabila syarat tertentu dipenuhi . Walau bagaimanapun, jika anda mahu animasi ini hanya dimainkan apabila elemen kelihatan dalam viewport, anda boleh menggunakan IntersectionObserver API.

Menggunakan IntersectionObserver API

IntersectionObserver API. membolehkan anda memerhatikan persilangan elemen dengan viewport atau elemen nenek moyang. Apabila elemen menjadi kelihatan (iaitu, bersilang dengan viewport), anda boleh mencetuskan tindakan, seperti menogol kelas atau melaksanakan animasi.

Berikut ialah contoh pelaksanaan menggunakan IntersectionObserver:

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);
});

Dalam fungsi inViewport, kami menyemak sama ada elemen itu bersilang dengan viewport (iaitu, entry.isIntersecting) dan togol kelas is-inViewport pada elemen sasaran.

Untuk menggayakan animasi, anda boleh menggunakan peralihan CSS atau bingkai utama seperti biasa. Sebagai contoh, anda boleh menentukan animasi untuk elemen dengan data-inviewport="scale-in" seperti berikut:

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

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

Dengan persediaan ini, elemen akan berskala daripada 10% hingga 100% apabila ia menjadi kelihatan dalam port pandangan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menghidupkan elemen hanya apabila ia berada dalam viewport menggunakan API CSS3 dan IntersectionObserver?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!