Lesson 13

nmarvila · nmarvila · commit aedb1b47e333 · 2023-10-08T17:30:23.000-03:00
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
@@ -59,6 +59,24 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(slideImage => {
+        const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height / 2;
+        const imageBottom = slideImage.offsetTop + slideImage.height;
+        const isHalfShown = slideInAt > slideImage.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+        if(isHalfShown && isNotScrolledPast) {
+          slideImage.classList.add('active');
+        } else {
+          slideImage.classList.remove('active');
+        }
+      });
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>
