jhbarnett
diff --git a/‎13 - Slide in on Scroll/index-FINISHED.html‎
Lines changed: 0 additions & 140 deletions b/‎13 - Slide in on Scroll/index-FINISHED.html‎
Lines changed: 0 additions & 140 deletions
diff --git a/‎13 - Slide in on Scroll/index-START.html‎ ‎13 - Slide in on Scroll/index.html‎13 - Slide in on Scroll/index-START.html renamed to 13 - Slide in on Scroll/index.html
Lines changed: 15 additions & 14 deletions b/‎13 - Slide in on Scroll/index-START.html‎ ‎13 - Slide in on Scroll/index.html‎13 - Slide in on Scroll/index-START.html renamed to 13 - Slide in on Scroll/index.html
Lines changed: 15 additions & 14 deletions
@@ -58,25 +58,26 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
-    const sliderImages = document.querySelectorAll('.slide-in');
-
-    function checkSlide(e) {
-      sliderImages.forEach(sliderImage => {
-        // half way through the image
-        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
-        // bottom of the image
-        const imageBottom = sliderImage.offsetTop + sliderImage.height;
-        const isHalfShown = slideInAt > sliderImage.offsetTop;
-        const isNotScrolledPast = window.scrollY < imageBottom;
+    const sliderImages = document.querySelectorAll('.slide-in')
+
+    function checkSlide(e){
+      sliderImages.forEach(img => {
+        //halfway thru img
+        const slideInAt = (window.scrollY + window.innerHeight) - (img.height/2)
+        //bottom of img
+        const imgBottom = img.offsetTop + img.height
+        const isHalfShown = slideInAt > img.offsetTop
+        const isNotScrolledPast = window.scrollY < imgBottom
+
         if (isHalfShown && isNotScrolledPast) {
-          sliderImage.classList.add('active');
+          img.classList.add('active')
         } else {
-          sliderImage.classList.remove('active');
+          img.classList.remove('active')
         }
-      });
+      })
     }
 
-    window.addEventListener('scroll', debounce(checkSlide));
+    window.addEventListener('scroll', debounce(checkSlide))
 
   </script>