13 slide in on scroll, final kb

Author: Kyle Bradshaw

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

@@ -58,6 +58,33 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      // console.log(e);
+      sliderImages.forEach(image => {
+        //when img is 50% visible, add active class;
+        // console.log(window.scrollY,window.scrollX,image.offset);
+        const slideInAt = (window.scrollY + window.innerHeight) - (image.height/2); //pixel level when each img should be slide in at
+
+        //scroll past the image you want to slide back out
+        const imageBottom = image.offsetTop + image.height; //top of image is far from top of doc + height so you know when it is offscreen
+
+        const isHalfShown = slideInAt > image.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+
+        console.log(window.scrollY, slideInAt, imageBottom, isHalfShown, isNotScrolledPast);
+        if(isHalfShown && isNotScrolledPast) {
+          image.classList.add('active');
+        } else {
+          image.classList.remove('active');
+        }
+
+      })
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>