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

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' in window) {
// Adjusted options to help large elements fade in
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
@ -12,7 +13,10 @@
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
}, {
threshold: 0.0,
rootMargin: '0px 0px -10% 0px'
});
fadeInElements.forEach(function(el) {
el.classList.add('fade-in-hidden');
@ -27,7 +31,7 @@
var checkVisibility = function() {
var windowBottom = window.innerHeight + window.scrollY;
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');
}
});