Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull requests Activity Actions

fix: fade-in for large elements

Browse source
This commit is contained in:
Dominik Polakovics Polakovics 2024-12-20 17:24:16 +01:00
parent ced2d8279b
commit defc44df99
1 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/base/Resources/Public/JavaScript/fade-in.js
View file

@ -5,6 +5,7 @@
// If IntersectionObserver is supported, use it for better performance // If IntersectionObserver is supported, use it for better performance
if ('IntersectionObserver' in window) { if ('IntersectionObserver' in window) {
// Adjusted options to help large elements fade in
var observer = new IntersectionObserver(function(entries, observer) { var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) { entries.forEach(function(entry) {
if (entry.isIntersecting) { if (entry.isIntersecting) {
@ -12,7 +13,10 @@
observer.unobserve(entry.target); observer.unobserve(entry.target);
} }
}); });
}, { threshold: 0.1 }); }, {
threshold: 0.0,
rootMargin: '0px 0px -10% 0px'
});
fadeInElements.forEach(function(el) { fadeInElements.forEach(function(el) {
el.classList.add('fade-in-hidden'); el.classList.add('fade-in-hidden');
@ -27,7 +31,7 @@
var checkVisibility = function() { var checkVisibility = function() {
var windowBottom = window.innerHeight + window.scrollY; var windowBottom = window.innerHeight + window.scrollY;
fadeInElements.forEach(function(el) { fadeInElements.forEach(function(el) {
if (el.getBoundingClientRect().top + window.scrollY < windowBottom - (el.offsetHeight * 0.1)) { if ((el.getBoundingClientRect().top + window.scrollY) < windowBottom - (el.offsetHeight * 0.1)) {
el.classList.add('fade-in-visible'); el.classList.add('fade-in-visible');
} }
}); });