wesbos#13 Completed.

Author: Alexander Besse

13 - Slide in on Scroll/index-START.html

@@ -58,6 +58,27 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(img => {
+        const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2; // Half way of image.
+        const imageBottom = img.offsetTop + img.height; // Bottom of image.
+
+        const isHalfShown = slideInAt > img.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+
+        if(isHalfShown && isNotScrolledPast){
+          img.classList.add('active');
+        } else {
+          img.classList.remove('active');
+        }
+      })
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
+
   </script>
 
   <style>