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 @@ 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)); +