2023-11-16 22:05:00 +01:00
|
|
|
|
function initScrollAnimations(elements) {
|
|
|
|
|
function checkVisibility(element) {
|
|
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
|
return rect.top < window.innerHeight && rect.bottom >= 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function animateElements() {
|
|
|
|
|
elements.forEach(element => {
|
|
|
|
|
if (checkVisibility(element)) {
|
|
|
|
|
element.classList.add('visible');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('scroll', animateElements);
|
|
|
|
|
|
|
|
|
|
animateElements();
|
|
|
|
|
}
|
2023-11-16 22:47:03 +01:00
|
|
|
|
|
2023-11-17 00:34:22 +01:00
|
|
|
|
|
2023-11-16 22:47:03 +01:00
|
|
|
|
function scrollToElement(elementId) {
|
|
|
|
|
var element = document.getElementById(elementId);
|
|
|
|
|
if (element) {
|
|
|
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-11-17 00:34:22 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function initHeroAreaScrollAnimation(scrollToElementId) {
|
|
|
|
|
const heroArea = document.querySelector('.hero_area');
|
|
|
|
|
const heroAreaHeight = heroArea.offsetHeight;
|
|
|
|
|
const threshold = heroAreaHeight / 1.75;
|
|
|
|
|
|
|
|
|
|
function onScroll() {
|
|
|
|
|
if (window.scrollY > threshold) {
|
|
|
|
|
heroArea.classList.remove('hero-area-visible');
|
|
|
|
|
heroArea.classList.add('hero-area-hidden');
|
|
|
|
|
} else {
|
|
|
|
|
heroArea.classList.remove('hero-area-hidden');
|
|
|
|
|
heroArea.classList.add('hero-area-visible');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('scroll', onScroll);
|
|
|
|
|
|
|
|
|
|
// Rückgabe einer Funktion zum Entfernen des Event-Listeners
|
|
|
|
|
return () => {
|
|
|
|
|
window.removeEventListener('scroll', onScroll);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|