feat: day 6

solygambas · solygambas · commit dafc030e2f7d · 2025-06-17T08:24:23.000+02:00
diff --git a/006-scroll animation/index.html b/006-scroll animation/index.html
@@ -8,18 +8,19 @@
   </head>
   <body>
     <h1>Scroll to see the animation</h1>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
+    <!-- Add Different Content to Boxes -->
+    <div class="box"><h2>Introduction</h2></div>
+    <div class="box"><h2>Getting Started</h2></div>
+    <div class="box"><h2>Basic Concepts</h2></div>
+    <div class="box"><h2>Advanced Features</h2></div>
+    <div class="box"><h2>Best Practices</h2></div>
+    <div class="box"><h2>Common Pitfalls</h2></div>
+    <div class="box"><h2>Troubleshooting</h2></div>
+    <div class="box"><h2>Performance Tips</h2></div>
+    <div class="box"><h2>Examples</h2></div>
+    <div class="box"><h2>Resources</h2></div>
+    <div class="box"><h2>Community</h2></div>
+    <div class="box"><h2>Conclusion</h2></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/006-scroll animation/script.js b/006-scroll animation/script.js
@@ -1,7 +1,8 @@
 const boxes = document.querySelectorAll(".box");
 
 const checkBoxes = () => {
-  const triggerBottom = (window.innerHeight / 5) * 4;
+  // Adjust Scroll Trigger Point
+  const triggerBottom = (window.innerHeight / 5) * 3.9;
   boxes.forEach((box) => {
     const boxTop = box.getBoundingClientRect().top;
     if (boxTop < triggerBottom) box.classList.add("show");
diff --git a/006-scroll animation/style.css b/006-scroll animation/style.css
@@ -30,16 +30,23 @@ h1 {
   margin: 10px;
   border-radius: 10px;
   box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
-  transform: translateX(400%);
-  transition: transform 0.4s ease;
+  /* Change Animation Direction for All Boxes */
+  transform: translateY(100%);
+  /* Create a Fade In Animation */
+  opacity: 0;
+  /* transition: transform 0.4s ease; */
+  transition: transform 0.4s ease, opacity 0.4s ease;
 }
 
-.box:nth-of-type(even) {
-  transform: translateX(-400%);
-}
+/* .box:nth-of-type(even) {
+  transform: translateX(400%);
+} */
 
 .box.show {
-  transform: translateX(0);
+  transform: translateY(0);
+  /* Change Box Background Color on Show */
+  background-color: #34113f;
+  opacity: 1;
 }
 
 .box h2 {
