Update index.html

Author: benhatsor

index.html

@@ -348,12 +348,13 @@ <h2 class="color-1 weight-title-h font-title section__title center">A codeful of
 const featurePoints = document.querySelectorAll('#features .ftPoint');
 const themeColorTag = document.querySelector('meta[name="theme-color"]');
 const heroEl = document.querySelector('#hero');
+const footerEl = document.querySelector('#footer');
 
 function checkScrollAnimations() {
 
   featurePoints.forEach(point => {
 
-    const visible = isScrolledIntoView(point);
+    const visible = isFullyInView(point);
 
     point.classList.toggle('visible', visible);
 
@@ -372,13 +373,23 @@ <h2 class="color-1 weight-title-h font-title section__title center">A codeful of
 
   }
 
+  
+  if (isPartlyInView(footerEl)) {
+    
+    document.documentElement.style.background = '#24262d';
+    
+  } else {
+    
+    document.documentElement.style.background = '#1a1c24';
+    
+  }
+  
 }
 
-function isScrolledIntoView(el) {
+function isFullyInView(el) {
 
   const rect = el.getBoundingClientRect();
   const elemTop = rect.top;
-  const elemBottom = rect.bottom;
 
   const height = 51.4 / 2; // el.clientHeight;
 
@@ -388,6 +399,17 @@ <h2 class="color-1 weight-title-h font-title section__title center">A codeful of
 
 }
 
+function isPartlyInView(el) {
+  
+  const rect = el.getBoundingClientRect();
+  const elemTop = rect.top;
+
+  const isVisible = elemTop < window.innerHeight;
+  
+  return isVisible;
+    
+}
+
 window.addEventListener('scroll', checkScrollAnimations);
 checkScrollAnimations();