Animando

script.js

@@ -91,3 +91,28 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Lightbox functionality can be added here
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+    const options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animated');
+                observer.unobserve(entry.target); // Stop observing once animated
+            }
+        });
+    }, options);
+
+    // Select elements to animate
+    const elements = document.querySelectorAll('.about-text, .about-image, .card, .gallery-item, .testimonial-card');
+
+    elements.forEach(element => {
+        element.classList.add('animate-on-scroll');
+        observer.observe(element);
+    });
+});

style.css

@@ -14,7 +14,7 @@
 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
-    width: 100%;
+    width: 100vw;
 }
 
 body {
@@ -121,7 +121,7 @@ body {
     align-items: center;
     justify-content: center; 
     padding: 20px;
-    animation: fadeScale 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: fadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .hero-content {
@@ -132,7 +132,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    animation: floatUp 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: fadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 iframe {
@@ -706,4 +706,70 @@ iframe {
 
 .footer a:hover {
     color: var(--color-cyan);
-}
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-on-scroll {
+    opacity: 0;
+}
+
+.animate-on-scroll.animated {
+    animation: fadeInUp 0.8s ease-out forwards;
+}
+
+.animate-on-scroll.animated {
+    animation: fadeInUp 0.8s ease-out forwards;
+}
+
+/* Add stagger delay for cards */
+.card.animated:nth-child(1) { animation-delay: 0.1s; }
+.card.animated:nth-child(2) { animation-delay: 0.2s; }
+.card.animated:nth-child(3) { animation-delay: 0.3s; }
+.card.animated:nth-child(4) { animation-delay: 0.4s; }
+
+/* Add stagger delay for gallery items */
+.gallery-item.animated:nth-child(1) { animation-delay: 0.1s; }
+.gallery-item.animated:nth-child(2) { animation-delay: 0.2s; }
+.gallery-item.animated:nth-child(3) { animation-delay: 0.3s; }
+/* Add more if needed */
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Apply different animations to different elements */
+.about-text.animated {
+    animation: fadeInLeft 0.8s ease-out forwards;
+}
+
+.about-image.animated {
+    animation: fadeInRight 0.8s ease-out forwards;
+}