Cloonar/lena-schilling-website
2
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: fade-in for large elements
Some checks failed
Build / deploy-stage (push) Blocked by required conditions
Details
Build / switch-stage (push) Blocked by required conditions
Details
Build / build (push) Has been cancelled
Details

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');
} }
}); });