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/Pages/Home.razor

@@ -2,8 +2,11 @@
 @page "/"
 
 @inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
-  <div class="hero_area">
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
         <section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
@@ -61,15 +64,17 @@
         </section>
         <!-- end slider section -->
       </div>
-  <!-- explaining section -->
+ 
+  
+    @*   <!-- explaining section -->
      <div class="container">
      
            </div>
-    
+         *@
   
 
   <!-- about section -->
-<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
         <div class="container">
           <div class="row">
               <div class="col-md-6">
@@ -104,7 +109,7 @@
         </div>
       </section>
 
-<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
         <div class="container">
           <div class="row">
             <div class="col-md-6">
@@ -138,16 +143,19 @@
           </div>
         </div>
       </section>
+
       <!-- end about section -->
+</section>
 
 
 @code {
     private ElementReference animatedAboutSection1;
     private ElementReference animatedAboutSection2;
 
-
     private List<ElementReference> animatedElements = new List<ElementReference>();
 
+    private Func<Task> removeScrollListener;
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -155,8 +163,26 @@
             animatedElements.Add(animatedAboutSection1);
             animatedElements.Add(animatedAboutSection2);
 
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
 
             await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
         }
     }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
 }

KIKunstKirstenKlöckner/Pages/Kirsten.razor

@@ -1,8 +1,11 @@
 @page "/kirstenkloeckner"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-<div class="hero_area">
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
         <section class=" slider_section" style="background-image: url('images/36GefleckteKatze2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
@@ -57,15 +60,15 @@
             </div>
         </section>
         <!-- end slider section -->
-</div>
+    </div>
-<!-- explaining section -->
+    <!-- explaining section -->
-<div class="container">
+    <div class="container">
-</div>
+    </div>
 
 
 
-<!-- about section -->
+    <!-- about section -->
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -100,9 +103,9 @@
 
             </div>
         </div>
-</section>
+    </section>
 
-<section class="about_section layout_padding">
+        <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
             <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -135,5 +138,46 @@
 
             </div>
         </div>
+    </section>
+    <!-- end about section -->
 </section>
-<!-- end about section -->
+
+
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
+
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+}

KIKunstKirstenKlöckner/Pages/Projekt.razor

@@ -1,11 +1,14 @@
 @page "/projekt"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-<div class="hero_area">
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
-    <section class=" slider_section ">
+        <section class="slider_section" style="background-image: url('images/3Umsatz2014.png'); background-size: cover; background-repeat: no-repeat;">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 ">
@@ -56,15 +59,15 @@
             </div>
         </section>
         <!-- end slider section -->
-</div>
+    </div>
-<!-- explaining section -->
+    <!-- explaining section -->
-<div class="container">
+    <div class="container">
-</div>
+    </div>
 
 
 
-<!-- about section -->
+    <!-- about section -->
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -98,9 +101,9 @@
 
             </div>
         </div>
-</section>
+    </section>
 
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -133,5 +136,46 @@
 
             </div>
         </div>
-</section>
+    </section>
 <!-- end about section -->
+</section>
+
+
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
+
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+}

KIKunstKirstenKlöckner/Pages/Wunschbilder.razor

@@ -1,8 +1,11 @@
 @page "/wunschprogramm"
 
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
 
-<div class="hero_area">
+    <div class="hero_area hero-area-visible">
 
         <!-- slider section -->
         <section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:hard-light   ;">
@@ -24,18 +27,10 @@
             </div>
         </section>
         <!-- end slider section -->
-</div>
+    </div>
-<!-- explaining section -->
-<div class="container">
-    <NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
-        <span class="nav-link">Erklärung</span>
-    </NavLink>
-</div>
 
-
+    <!-- about section -->
-
+    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
-<!-- about section -->
-<section class="about_section layout_padding">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -68,9 +63,9 @@
 
             </div>
         </div>
-</section>
+    </section>
 
-<section class="about_section layout_padding">
+    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -104,5 +99,46 @@
 
             </div>
         </div>
-</section>
+    </section>
 <!-- end about section -->
+</section>
+
+
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
+
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+                "initHeroAreaScrollAnimation"
+            );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+}

KIKunstKirstenKlöckner/Shared/MainLayout.razor

@@ -35,6 +35,9 @@
                                 <NavLink class="nav-item" href="kirstenkloeckner" Match="NavLinkMatch.All">
                                     <span class="nav-link">Kirsten</span>
                                 </NavLink>
+                                <NavLink class="nav-item" href="projekt" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Projekt</span>
+                                </NavLink>
                                 <NavLink class="nav-item" href="gallery" Match="NavLinkMatch.All">
                                     <span class="nav-link">Galerie</span>
                                 </NavLink>

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/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);
+    };
+}
+
+