Animationen sind ganz toll und gar kein krampf :D

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

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