diff --git a/KIKunstKirstenKlöckner.sln b/KIKunstKirstenKlöckner.sln index 8d4d872..64904b5 100644 --- a/KIKunstKirstenKlöckner.sln +++ b/KIKunstKirstenKlöckner.sln @@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", " EndProject Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}" EndProject -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}" +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}" EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution diff --git a/KIKunstKirstenKlöckner/Pages/Home.razor b/KIKunstKirstenKlöckner/Pages/Home.razor index c347399..0372b17 100644 --- a/KIKunstKirstenKlöckner/Pages/Home.razor +++ b/KIKunstKirstenKlöckner/Pages/Home.razor @@ -1,7 +1,7 @@  @page "/" - +@inject IJSRuntime JSRuntime
@@ -69,7 +69,7 @@ -
+
@@ -104,7 +104,7 @@
-
+
@@ -141,11 +141,22 @@ +@code { + private ElementReference animatedAboutSection1; + private ElementReference animatedAboutSection2; - - - + private List animatedElements = new List(); + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + animatedElements.Add(animatedAboutSection1); + animatedElements.Add(animatedAboutSection2); + await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements); + } + } +} \ No newline at end of file diff --git a/KIKunstKirstenKlöckner/Pages/Wunschbilder.razor b/KIKunstKirstenKlöckner/Pages/Wunschbilder.razor index cf1323a..040644b 100644 --- a/KIKunstKirstenKlöckner/Pages/Wunschbilder.razor +++ b/KIKunstKirstenKlöckner/Pages/Wunschbilder.razor @@ -27,6 +27,9 @@
+ + Erklärung +
diff --git a/KIKunstKirstenKlöckner/Pages/_Host.cshtml b/KIKunstKirstenKlöckner/Pages/_Host.cshtml index 239758c..66e6d7e 100644 --- a/KIKunstKirstenKlöckner/Pages/_Host.cshtml +++ b/KIKunstKirstenKlöckner/Pages/_Host.cshtml @@ -42,6 +42,8 @@ + + @@ -63,6 +65,7 @@ + diff --git a/KIKunstKirstenKlöckner/wwwroot/css/animations.css b/KIKunstKirstenKlöckner/wwwroot/css/animations.css new file mode 100644 index 0000000..a950403 --- /dev/null +++ b/KIKunstKirstenKlöckner/wwwroot/css/animations.css @@ -0,0 +1,52 @@ +.text-animate { + opacity: 0; + transition: opacity 1s ease-in-out; +} + +.text-animate.visible { + opacity: 1; +} + +.image-animate-left { + position: relative; + opacity: 0; + left: -100%; + transition: left 2s ease-in-out, opacity 2s ease-in-out; +} + +.image-animate-left.visible { + left: 50%; + transform: translateX(-50%); + opacity: 1; +} + +.section-animate-left { + width: 100% margin-left: auto; + margin-right: auto; + opacity: 0; + left: -100%; + transition: left 1.2s ease-in-out, opacity 2s ease-in-out; + position: relative; +} + +.section-animate-left.visible { + left: 50%; + transform: translateX(-50%); + opacity: 1; +} + +.section-animate-right { + width: 100%; + margin-left: auto; + margin-right: auto; + opacity: 0; + transform: translateX(100%); + transition: transform 1.2s ease-in-out, opacity 2s ease-in-out; + position: relative; +} + +.section-animate-right.visible { + transform: translateX(0%); + opacity: 1; +} + diff --git a/KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png b/KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png new file mode 100644 index 0000000..9662383 Binary files /dev/null and b/KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png differ diff --git a/KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg b/KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg new file mode 100644 index 0000000..c7ba672 Binary files /dev/null and b/KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg differ diff --git a/KIKunstKirstenKlöckner/wwwroot/js/animator.js b/KIKunstKirstenKlöckner/wwwroot/js/animator.js new file mode 100644 index 0000000..45719dc --- /dev/null +++ b/KIKunstKirstenKlöckner/wwwroot/js/animator.js @@ -0,0 +1,19 @@ +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); + + // Initialer Aufruf für den Fall, dass Elemente bereits sichtbar sind + animateElements(); +}