🎬 Scroll Animations
Smooth animations triggered as you scroll through the page using the Intersection Observer API.
Scroll down to see the magic! ✨
💻 How It Works
The scroll animations use the IntersectionObserver API to detect when elements enter the viewport. Here's the core implementation:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
});
const elements = document.querySelectorAll('.hidden');
elements.forEach(el => observer.observe(el));
The threshold determines how much of the element must be visible, and rootMargin creates a buffer zone for triggering the animation.