Dodano system animacji fadeIn przy scrollowaniu: - CSS keyframes: fadeIn, fadeInLeft, fadeInRight, fadeInUp, scaleIn - IntersectionObserver w static/js/scroll-animations.js - Event banner: data-animate="fadeIn" - Chat banner: data-animate="fadeIn" - Company cards: data-animate="fadeInUp" z delay stagger - Search section: data-animate="fadeIn" - Wsparcie dla prefers-reduced-motion Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
/**
|
|
* Scroll Animations - NordaBiz
|
|
* Animacje fadeIn przy scrollowaniu z IntersectionObserver
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Sprawdź czy przeglądarka obsługuje IntersectionObserver
|
|
if (!('IntersectionObserver' in window)) {
|
|
// Fallback - pokaż wszystkie elementy bez animacji
|
|
document.querySelectorAll('[data-animate]').forEach(el => {
|
|
el.style.opacity = '1';
|
|
});
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const animationType = entry.target.dataset.animate || 'fadeIn';
|
|
entry.target.classList.add('animate-' + animationType);
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
// Obserwuj wszystkie elementy z atrybutem data-animate
|
|
document.querySelectorAll('[data-animate]').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
});
|