45 lines
1.5 KiB
JavaScript
45 lines
1.5 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) {
|
|
// Adjusted options to help large elements fade in
|
|
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.0,
|
|
rootMargin: '0px 0px -10% 0px'
|
|
});
|
|
|
|
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();
|
|
}
|
|
});
|
|
})();
|