Bagaimana untuk Mencetuskan Animasi CSS Apabila Elemen Memasuki Port Pandangan Semasa Tatal Halaman?

Elemen Animasi Apabila Kelihatan dalam Viewport Semasa Tatal Halaman

Apabila menggunakan animasi CSS pada halaman web, adalah perkara biasa untuk menghadapi situasi di mana semua animasi dimainkan secara serentak, mengaburkan mereka di bahagian bawah. Untuk menangani isu ini, kami akan meneroka penyelesaian menggunakan API IntersectionObserver.

IntersectionObserver API

API IntersectionObserver membenarkan pembangun memantau perubahan dalam persimpangan elemen dengan bekas induknya atau port pandang. Apabila elemen muncul, ia mencetuskan peristiwa yang boleh digunakan untuk memulakan tindakan.

Contoh Pelaksanaan

Berikut ialah contoh yang mencetuskan togol kelas CSS apabila unsur menjadi kelihatan dalam viewport:

<br>const inViewport = (entri, pemerhati) => {<br> entri.forEach(entry => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

Salin selepas log masuk

});
};

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

// Lampirkan pemerhati pada setiap elemen [data-inviewport]:
dokumen .querySelectorAll('[data-inviewport]').forEach(el => {
Obs.observe(el, obsOptions);
});

Dalam contoh di atas, semua elemen dengan atribut [data-inviewport] akan menjadi dipantau. Apabila elemen dilihat, kelas is-inViewport ditambah dan animasi yang ditakrifkan dalam CSS di bawah akan dicetuskan.

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

[data -inviewport="fade-rotate"] { 
 peralihan: 2s;
 kelegapan: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
 transform: rotate(180deg);
 kelegapan: 1;
}
< ;/pre>
Penyelesaian ini memastikan animasi hanya dimainkan apabila elemen kelihatan semasa menatal, menambah baik pengalaman pengguna dan mencipta halaman web yang lebih menarik secara visual.
Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Animasi CSS Apabila Elemen Memasuki Port Pandangan Semasa Tatal Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!