41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
(function() {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Elements that should fade in when in view
|
|
var fadeInElements = document.querySelectorAll('.fade-in-on-scroll');
|
|
|
|
// If IntersectionObserver is supported, use it for better performance
|
|
if ('IntersectionObserver' in window) {
|
|
var observer = new IntersectionObserver(function(entries, observer) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('fade-in-visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
fadeInElements.forEach(function(el) {
|
|
el.classList.add('fade-in-hidden');
|
|
observer.observe(el);
|
|
});
|
|
} else {
|
|
// Fallback if IntersectionObserver is not supported
|
|
fadeInElements.forEach(function(el) {
|
|
el.classList.add('fade-in-hidden');
|
|
});
|
|
|
|
var checkVisibility = function() {
|
|
var windowBottom = window.innerHeight + window.scrollY;
|
|
fadeInElements.forEach(function(el) {
|
|
if (el.getBoundingClientRect().top + window.scrollY < windowBottom - (el.offsetHeight * 0.1)) {
|
|
el.classList.add('fade-in-visible');
|
|
}
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', checkVisibility);
|
|
checkVisibility();
|
|
}
|
|
});
|
|
})();
|