course wesbos#13 finished

Author: Jin Xu

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

@@ -58,6 +58,28 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    window.onload = function() {
+      var imgInfo = [];
+
+      [...document.querySelectorAll('img')].forEach((ele, idx) => {
+        imgInfo.push({
+          'dom': ele,
+          'top': ele.offsetTop,
+          'height': ele.offsetHeight
+        })
+      })
+      
+      window.addEventListener('scroll', e => {
+        imgInfo.forEach((info, idx) => {
+          if(((window.scrollY) >= (info.top + .5 * info.height - window.innerHeight)) && ((window.scrollY) <= (info.top + 1.5 * info.height - .5 * window.innerHeight))){
+              (info.dom).classList.add('active')
+          }
+          else {
+              (info.dom).classList.remove('active')
+          }
+        })
+      })
+    }
   </script>
 
   <style>

readme.md

@@ -16,7 +16,7 @@
 10. [x] ~~Hold Shift and Check Checkboxes~~
 11. [ ] Custom Video Player
 12. [x] ~~Key Sequence Detection~~
-13. [ ] Slide in on Scroll
+13. [x] ~~Slide in on Scroll~~
 14. [ ] JavaScript References vs. Copying
 15. [ ] LocalStorage
 16. [ ] Mouse Move Shadow