Noch mehr super tolle Animationen die überhaupt gar kein Krebs waren zu implementieren und super toll aussehen und gar kein krebs waren zu implementieren :D

KIKunstKirstenKlöckner/wwwroot/css/animations.css

@@ -50,3 +50,14 @@
     opacity: 1;
 }
 
+.hero-area-visible {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.5s ease-in-out;
+}
+
+.hero-area-hidden {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity 0.3s ease-in-out, transform 0.8s ease-in-out;
+}

KIKunstKirstenKlöckner/wwwroot/css/style.scss

@@ -75,11 +75,11 @@ body {
 
 /*header section*/
 .hero_area {
-  height: 98vh;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: #eae6f5;
+    height: 98vh;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: #eae6f5;
 }
 
 .sub_page {

KIKunstKirstenKlöckner/wwwroot/js/animator.js

@@ -17,9 +17,36 @@
     animateElements();
 }
 
+
 function scrollToElement(elementId) {
     var element = document.getElementById(elementId);
     if (element) {
         element.scrollIntoView({ behavior: 'smooth' });
     }
 }
+
+
+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);
+    };
+}
+
+