Update file home.html

wiki/pages/home.html

@@ -122,7 +122,10 @@
   <script>
     const blocks = document.querySelectorAll('.content-block');
     const menu = document.getElementById('menu');
-    const colors = ['#FFFFFF', '#FF5151'];
+    const colors = {
+      background: ['#FFFFFF', '#FF5151'],
+      text: ['#FF5151', '#FFFFFF']
+    };
     let lastScrollTop = 0;
 
     function interpolateColor(color1, color2, factor) {
@@ -145,20 +148,29 @@
       const windowHeight = window.innerHeight;
 
       blocks.forEach((block, index) => {
-        const blockTop = block.offsetTop;
+        const blockTop = block.offsetTop - 60; // Adjust for menu height
         const blockHeight = block.offsetHeight;
-        const blockProgress = (scrollPosition + windowHeight / 2 - blockTop) / blockHeight;
-
-        if (blockProgress >= 0 && blockProgress <= 1) {
-          const startColor = index % 2 === 0 ? colors[0] : colors[1];
-          const endColor = index % 2 === 0 ? colors[1] : colors[0];
-
-          const backgroundColor = interpolateColor(startColor, endColor, blockProgress);
-          const textColor = interpolateColor(endColor, startColor, blockProgress);
-
-          block.style.backgroundColor = backgroundColor;
-          block.style.color = textColor;
-        }
+        const blockCenter = blockTop + blockHeight / 2;
+        const distanceFromCenter = Math.abs(scrollPosition + windowHeight / 2 - blockCenter);
+        const maxDistance = windowHeight / 2 + blockHeight / 2;
+        let progress = 1 - Math.min(distanceFromCenter / maxDistance, 1);
+
+        // Ensure the progress is always between 0 and 1
+        progress = Math.max(0, Math.min(1, progress));
+
+        const backgroundColor = interpolateColor(
+          colors.background[index % 2],
+          colors.background[(index + 1) % 2],
+          progress
+        );
+        const textColor = interpolateColor(
+          colors.text[index % 2],
+          colors.text[(index + 1) % 2],
+          progress
+        );
+
+        block.style.backgroundColor = backgroundColor;
+        block.style.color = textColor;
       });
 
       // Menu fade effect