Finished wesbos#13

Author: smchenrybc

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

@@ -43,6 +43,8 @@ <h1>Slide in on Scroll</h1>
   </div>
 
   <script>
+    // debounce is used to limit the frequency
+    // with which the contained function runs.
     function debounce(func, wait = 20, immediate = true) {
       var timeout;
       return function() {
@@ -58,6 +60,32 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkslide(e) {
+      // console.count(e);
+
+      sliderImages.forEach(slideImage => {
+        // 1/3 of the way down the image
+        const slideInAt = ((window.scrollY + window.innerHeight) - (slideImage.height / 3));
+
+        // bottom of the image
+        const imageBottom = (slideImage.offsetTop + slideImage.height);
+
+        // comparison vars
+        const isHalfShown = slideInAt > slideImage.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+
+        // comparison & add/remove class
+        if (isHalfShown && isNotScrolledPast) {
+          slideImage.classList.add('active');
+        } else {
+          slideImage.classList.remove('active');
+        }
+      });
+    }
+    window.addEventListener('scroll', debounce(checkslide));
+
   </script>
 
   <style>