From e8ee8c874c42aa47df0d0f76181bbaa18b84107b Mon Sep 17 00:00:00 2001 From: ASAP Date: Fri, 10 Nov 2017 22:46:34 -0500 Subject: [PATCH 1/2] Day 12 complete --- 12 - Key Sequence Detection/index-START.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 8cab786140..400f40af5d 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -7,6 +7,18 @@ From 5c6aeec724afcb6dd505d17dc11bd58934ad240a Mon Sep 17 00:00:00 2001 From: ASAP Date: Sat, 25 Nov 2017 17:17:15 -0500 Subject: [PATCH 2/2] Day 12 completed --- 13 - Slide in on Scroll/index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 0b9fb8fccb..526132d1e6 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -58,6 +58,24 @@

Slide in on Scroll

}; } + const sliderImages = document.querySelectorAll('.slide-in'); + + const checkSlide = (e) => { + sliderImages.forEach(sliderImage => { + const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; + const imageBottom = sliderImage.offsetTop + sliderImage.height; + const isHalfShown = slideInAt > sliderImage.offsetTop; + const isNotScrolledPast = window.scrollY < imageBottom; + if (isHalfShown && isNotScrolledPast) { + sliderImage.classList.add('active'); + } else { + sliderImage.classList.remove('active'); + } + }); + }; + + window.addEventListener('scroll', debounce(checkSlide)); +