Merge pull request #110 from shrvtiprasad/fade-in

Added a Scroll Fade-In animation

Author: Varshitha713

index.html

@@ -35,15 +35,15 @@
   </header>
 
   <main>
-    <section class="hero">
+    <section class="hero fade-in">
       <div class="container">
         <h1>Showcase Your Front-End Creations</h1>
         <p>Discover, share, and get inspired by amazing front-end projects from developers around the world. Join the community and showcase your creativity!</p>
         <a href="#projects" class="btn-primary">Explore Projects</a>
       </div>
     </section>
 
-    <section class="container" id="browse">
+    <section class="container fade-in" id="browse">
       <div class="filters">
         <h2><i class="fas fa-filter"></i> Filter Projects</h2>
         <div class="filter-controls">
@@ -87,9 +87,9 @@ <h2><i class="fas fa-filter"></i> Filter Projects</h2>
       </div>
     </section>
 
-    <section class="projects-section" id="projects">
-      <div class="projects-container">
-        <h2 class="section-title">Featured Projects</h2>
+    <section class="projects-section fade-in" id="projects">
+      <div class="projects-container fade-in">
+        <h2 class="section-title fade-in">Featured Projects</h2>
         <div class="loading" id="loading"><div class="spinner"></div></div>
         <div class="projects-grid" id="projects-container" style="display: none;"></div>
         <div class="empty-state" id="empty-state" style="display: none;">
@@ -100,9 +100,9 @@ <h3>No projects found</h3>
       </div>
     </section>
 
-    <section class="reviews-section" id="reviews" style="cursor:auto;">
-      <h2 class="review-section-title">Developer Reviews</h2>
-      <div class="swiper review-swiper">
+    <section class="reviews-section fade-in" id="reviews" style="cursor:auto;">
+      <h2 class="review-section-title fade-in">Developer Reviews</h2>
+      <div class="swiper review-swiper fade-in">
         <div class="swiper-wrapper">
           <div class="swiper-slide">
             <div class="testimonial">
@@ -160,7 +160,7 @@ <h3 class="review-name">Sara Ahmed</h3>
       </div>
     </section>
 
-    <section class="contact-section" id="contact" style="padding: 80px 0; color: white">
+    <section class="contact-section fade-in" id="contact" style="padding: 80px 0; color: white">
       <div class="container" id="contact-container" style="max-width: 1000px; margin: 0 auto">
         <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bottom: 50px; font-weight: bold;">Contact Us</h2>
         <form id="contact-form" onsubmit="return validateForm()" style="display: flex; flex-direction: column; gap: 25px">
@@ -188,11 +188,13 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
         </form>
         <div id="form-status" style="text-align: center; margin-top: 30px; font-size: 1.2rem; display: none;">✅ Message sent successfully!</div>
       </div>
+    </section>
+  </main>
 
-        
-    </main>
+  
 
-    <footer class="footer">
+
+    <footer class="footer fade-in">
       <div class="footer-flex-container">
         <div class="footer-1">
         <div class="footer-logo">CodeCanvas</div>
@@ -228,14 +230,14 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
 
     </section>
 
-    <div id="message-overlay">
-      <div class="overlay-content">
-        <i class="fas fa-check-circle"></i>
-        <p>Message Delivered</p>
-      </div>
+
+  <div id="message-overlay">
+    <div class="overlay-content">
+      <i class="fas fa-check-circle"></i>
+      <p>Message Delivered</p>
     </div>
-  </main>
-  <script src="script.js"></script>
+  </div>
 
+  <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -615,3 +615,26 @@ scrollToTopBtn.addEventListener("click", () => {
         behavior: "smooth"
     });
 });
+document.addEventListener("DOMContentLoaded", () => {
+  const faders = document.querySelectorAll('.fade-in');
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('animate');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+
+  faders.forEach(fade => observer.observe(fade));
+});
+entries.forEach((entry, index) => {
+  if (entry.isIntersecting) {
+    setTimeout(() => {
+      entry.target.classList.add('animate');
+    }, index * 100); // 100ms delay between cards
+    observer.unobserve(entry.target);
+  }
+});
+

style.css

@@ -1,4 +1,4 @@
-/* Base styles */
+
         * {
             margin: 0;
             padding: 0;
@@ -83,12 +83,33 @@
             transition: background 0.3s ease, color 0.3s ease;
         }
 
+
 .container,
 .filter-container,
 .projects-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
+
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+@keyframes Fadeinup {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 0; /* ✅ start hidden */
+  transform: translateY(20px);
+}
+
+.fade-in.animate {
+  animation: Fadeinup 0.6s ease-out forwards;
 }
 
         /* Header styles */
@@ -1008,13 +1029,15 @@ body.dark-theme .tag-badge {
     }
 
     /* Newly injected code */
+
 #contact-container {
   background-color: rgba(255, 255, 255, 0.151);
   backdrop-filter: blur(2px);
   border-radius: 30px;
   border: 1px solid rgba(255, 255, 255, 0.29);
   padding: 30px;
 }
+
 #email {
   width: 100% !important;
   font-size: 1.2rem;
@@ -1102,6 +1125,7 @@ textarea {
     transform: scale(0.8);
     opacity: 0;
   }
+
   to {
     transform: scale(1);
     opacity: 1;
@@ -1113,15 +1137,18 @@ textarea {
     transform: scale(1);
     opacity: 0.5;
   }
+
   50% {
     transform: scale(1.05);
     opacity: 1;
   }
+
   100% {
     transform: scale(1);
     opacity: 0.5;
   }
 }
+
 .fas-animation {
   animation: softPulse 3s infinite ease-in-out;
 }
@@ -1223,44 +1250,47 @@ body.dark-theme .fill-btn:hover {
     width: 100%;
   }
 }
+
 /* ------------------------------------------- */
- .dark-theme .filters {
+.dark-theme .filters {
 
-            background: rgba(18, 25, 60, 0.75); /* dark blue translucent */
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            
-            border-radius: 16px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            
-            box-shadow:
-                0 0 8px rgba(44, 66, 255, 0.4),
-                0 0 16px rgba(44, 66, 255, 0.3);
-            
-            color: #f0f4ff;
-            transition: all 0.3s ease;
-        }
+  background: rgba(18, 25, 60, 0.75);
+  /* dark blue translucent */
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 
-         .dark-theme .project-card {
-          background: rgba(18, 25, 60, 0.75); /* dark blue translucent */
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            
-            border-radius: 16px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            
-            box-shadow:
-                0 0 8px rgba(44, 66, 255, 0.4),
-                0 0 16px rgba(44, 66, 255, 0.3);
-            
-            color: #f0f4ff;
-            transition: all 0.3s ease;
-        }
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  box-shadow:
+    0 0 8px rgba(44, 66, 255, 0.4),
+    0 0 16px rgba(44, 66, 255, 0.3);
+
+  color: #f0f4ff;
+  transition: all 0.3s ease;
+}
+
+.dark-theme .project-card {
+  background: rgba(18, 25, 60, 0.75);
+  /* dark blue translucent */
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  box-shadow:
+    0 0 8px rgba(44, 66, 255, 0.4),
+    0 0 16px rgba(44, 66, 255, 0.3);
+
+  color: #f0f4ff;
+  transition: all 0.3s ease;
+}
 
 /* Dark theme styles  for cards*/
 body.dark-theme button:hover {
   background-color: rgba(102, 126, 234, 0.3);
-  cursor: pointer;
+  cursor: pointer;
 }
 
 
@@ -1293,7 +1323,7 @@ body.dark-theme textarea {
 
 /* Dark mode buttons */
 body.dark-theme button {
-  background-color: rgba(102, 126, 234, 0.3) ;
+  background-color: rgba(102, 126, 234, 0.3);
   color: #ffffff !important;
   border: 1px solid rgba(102, 126, 234, 0.3);
 }
@@ -1305,22 +1335,22 @@ body.dark-theme button:hover {
 }
 
 
-        #scrollToTopBtn {
-    position: fixed;
-    bottom: 2rem;
-    right: 2rem;
-    z-index: 999;
-    background-color: #667eea;
-    color: white;
-    border: none;
-    outline: none;
-    padding: 0.75rem 1rem;
-    border-radius: 50%;
-    font-size: 1.25rem;
-    cursor: pointer;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    display: none;
-    transition: background 0.3s ease, transform 0.3s ease;
+#scrollToTopBtn {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 999;
+  background-color: #667eea;
+  color: white;
+  border: none;
+  outline: none;
+  padding: 0.75rem 1rem;
+  border-radius: 50%;
+  font-size: 1.25rem;
+  cursor: pointer;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  display: none;
+  transition: background 0.3s ease, transform 0.3s ease;
 }
 
 #scrollToTopBtn:hover {
@@ -1379,4 +1409,4 @@ body.dark-theme button:hover {
   flex-wrap: wrap;
   font-size: 14px;
   gap: 50px;
-}
+}