Implement intersection observer for card visibility with smooth trans…

…itions

index.html

@@ -147,6 +147,20 @@ <h2>What is Glide Client?</h2>
                 card.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
             });
         });
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, {
+            threshold: 0.1
+        });
+
+        document.querySelectorAll('.card').forEach(card => {
+            observer.observe(card);
+        });
     </script>
 </body>
 

style.css

@@ -479,7 +479,26 @@ body {
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
-    transition: transform 0.3s ease;
+    transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s ease;
+    opacity: 0;
+    transform: translateY(50px);
+}
+
+.card.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.card:nth-child(1) {
+    transition-delay: 0.2s;
+}
+
+.card:nth-child(2) {
+    transition-delay: 0.4s;
+}
+
+.card:nth-child(3) {
+    transition-delay: 0.6s;
 }
 
 .card::before {