document.querySelector('#navbar-icon').addEventListener('click', function () { // Wähle alle Elemente, die "slide-target" als Teil ihrer Klasse enthalten const slidingElements = document.querySelectorAll('[class*="slide-target"]'); const menuWrapper = document.querySelector('.menu-outer-wrapper'); // Menü-Wrapper-Element // Deaktiviert Scrollen, solange das Menü sichtbar ist if (menuWrapper && window.getComputedStyle(menuWrapper).display !== 'none') { disableScroll(); // Scrollen deaktivieren } slidingElements.forEach((slidingElement, index) => { // Setze die Ausgangsposition zurück (off-screen) slidingElement.style.transition = 'none'; slidingElement.style.opacity = '0'; // Unsichtbar machen slidingElement.style.transform = 'translateX(100vw)'; // Ausgangsposition (rechts außerhalb) // Lasse die Animation mit Verzögerung starten setTimeout(() => { slidingElement.style.transition = 'transform 1s ease-in-out, opacity 1s ease-in-out'; // Smooth transition slidingElement.style.opacity = '1'; // Einfaden slidingElement.style.transform = 'translateX(0)'; // Zurück zur Endposition }, index * 100); // Verzögerung von 100ms pro Element }); }); // Funktion zum Deaktivieren des Scrollens function disableScroll() { document.body.style.overflow = 'hidden'; // Verhindert Scrollen document.body.style.height = '100%'; // Sicherstellen, dass die Höhe fixiert bleibt // Blockiere auch Touch-Scrollen auf mobilen Geräten document.addEventListener('touchmove', preventDefaultScroll, { passive: false }); document.addEventListener('wheel', preventDefaultScroll, { passive: false }); } // Funktion zum Aktivieren des Scrollens function enableScroll() { document.body.style.overflow = ''; // Scrollen aktivieren document.body.style.height = ''; // Höhe zurücksetzen // Entferne die Event-Listener für Scroll-Blockade document.removeEventListener('touchmove', preventDefaultScroll); document.removeEventListener('wheel', preventDefaultScroll); } // Funktion, um Standard-Scrollen zu verhindern function preventDefaultScroll(event) { event.preventDefault(); } // Überwacht Änderungen am Display-Status von menu-outer-wrapper const observer = new MutationObserver(() => { const menuWrapper = document.querySelector('.menu-outer-wrapper'); if (menuWrapper && window.getComputedStyle(menuWrapper).display === 'none') { enableScroll(); // Scrollen aktivieren, wenn Menü ausgeblendet ist } }); // Beobachte das menu-outer-wrapper const menuWrapper = document.querySelector('.menu-outer-wrapper'); if (menuWrapper) { observer.observe(menuWrapper, { attributes: true, attributeFilter: ['style'] }); }