Update file home.html

wiki/pages/home.html

@@ -478,12 +478,12 @@
         </div>
       </div>
 
-  <div id="last-block">
-    <h4>Through Muscure, we aim to improve the treatment experience for IBD patients. </h4>
-    <h4>Through Muscure, we hope to enhance the quality of life for IBD patients. </h4>
-    <h4>Through Muscure, we wish to unlock the personal potential of IBD patients. </h4>
-    <h2>Muscure, muscone cure for Inflammatory Bowel Disease.</h2>
-  </div>
+      <div id="last-block">
+        <h4 class="fade-line">Through Muscure, we aim to improve the treatment experience for IBD patients.</h4>
+        <h4 class="fade-line">Through Muscure, we hope to enhance the quality of life for IBD patients.</h4>
+        <h4 class="fade-line">Through Muscure, we wish to unlock the personal potential of IBD patients.</h4>
+        <h2 class="fade-line">Muscure, muscone cure for Inflammatory Bowel Disease.</h2>
+      </div>
 </div>
 </div>
 
@@ -546,6 +546,26 @@
     window.addEventListener('scroll', handleScroll);
     window.addEventListener('load', handleScroll);
 
+
+    function handleLastBlockFade() {
+      const lastBlock = document.getElementById('last-block');
+      const fadeLines = lastBlock.querySelectorAll('.fade-line');
+      const lastBlockRect = lastBlock.getBoundingClientRect();
+      const triggerPoint = window.innerHeight * 0.8; // 80% of viewport height
+
+      if (lastBlockRect.top <= triggerPoint) {
+        fadeLines.forEach((line, index) => {
+          setTimeout(() => {
+            line.classList.add('fade-in');
+          }, index * 500); // Delay each line by 500ms
+        });
+        // Remove the event listener once the animation is triggered
+        window.removeEventListener('scroll', handleLastBlockFade);
+      }
+    }
+
+    window.addEventListener('scroll', handleLastBlockFade);
+    window.addEventListener('load', handleLastBlockFade);
   </script>
 </body>
 </html>
\ No newline at end of file