tutorial wesbos#13 completed

Author: mochibot

13 - Slide in on Scroll/README.md

@@ -0,0 +1,4 @@
+Things learned:
+
+- Use of debounce to limit the rate at which a function can fire, to ensure that the function does not fire so often that it bricks browser performance
+- How to detect if browser window is scrolled to the position of the image

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

@@ -43,6 +43,7 @@ <h1>Slide in on Scroll</h1>
   </div>
 
   <script>
+    //only run function every 20 ms to reduce the number of events
     function debounce(func, wait = 20, immediate = true) {
       var timeout;
       return function() {
@@ -58,6 +59,24 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    let images = document.querySelectorAll('img')
+    
+    function checkSlide(event) {
+      images.forEach(item => {
+        const start = (window.scrollY + window.innerHeight) - item.height / 2;
+        const end = item.offsetTop + item.height;
+        if (start > item.offsetTop && window.scrollY < end) {
+          item.classList.add('active')
+        } else {
+          item.classList.remove('active')
+        }
+      })
+    }
+    
+    document.addEventListener('scroll', debounce(checkSlide))
+
+
+
   </script>
 
   <style>