Bagaimana untuk Menghidupkan Elemen Hanya Apabila Mereka berada di Viewport?

Menghidupkan Elemen dalam Viewport Menggunakan Tatal Halaman

S: Bagaimanakah saya boleh memaparkan animasi pada halaman web hanya apabila elemen kelihatan dalam viewport semasa menatal?

J: Untuk mencapai ini, anda boleh menggunakan IntersectionObserver API.

Intersection Observer API

Intersection Observer API membolehkan anda memerhatikan persilangan antara elemen dan elemen induknya atau tempat pandang. Ia membolehkan anda mencetuskan peristiwa berdasarkan sama ada elemen itu boleh dilihat dalam port pandangan.

Berikut ialah contoh menggunakan API untuk menogol kelas yang boleh digunakan untuk mencetuskan animasi:

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

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

Anda kemudiannya boleh menambah peralihan atau animasi CSS pada elemen dengan kelas "is-inViewport" untuk menghidupkannya apabila ia muncul dalam viewport. Contohnya:

[data-inviewport] {
  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;
}

Dengan kod ini, elemen dengan atribut [data-inviewport] akan mempunyai peralihan CSS. Apabila mereka memasuki viewport, kelas is-inViewport akan ditambahkan untuk mencetuskan animasi.

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Elemen Hanya Apabila Mereka berada di Viewport?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!