🧭 Alternative: Intersection Observer (Commented Out) - MuaddhAlsway/Alert-Fashion GitHub Wiki
🧭 Alternative: Intersection Observer (Commented Out)
📄 Code
const sections = document.querySelectorAll('.fade-in-up');
const appearOnScroll = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
sections.forEach(section => {
appearOnScroll.observe(section);
});
💡 Explanation
-
Native browser method for detecting when elements appear in the viewport.
-
Adds visible class when elements become visible (10% or more).
-
Useful as a lightweight alternative to ScrollReveal.
🔍 How to Practice & Learn More
-
Change class names or delays in ScrollReveal and observe results.
-
Add console.log() in click events to debug behavior.
-
Check your HTML: make sure ids and classes match your JavaScript.
-
Study each method on MDN Web Docs.