JavaScript30-13.Slide In on Scroll

const sliderImages = document.querySelectorAll('.slide-in'); 
                                         // 모든 이미지를 선택

    function checkSlide() {
      sliderImages.forEach(sliderImage => {
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        // 스크롤한 높이 + 현재 뷰포인트 높이(그럼 이미지의 bottom이 현재 위치)에서 
        이미지의 높이의 중간 만큼을 빼야함(그래야 이미지의 중간 위치가 됨)
        const imageBottom = sliderImage.offsetTop + sliderImage.height; 
        // 이미지 bottom에 접근(이미지에서부터 top까지의 길이와 이미지 높이의 합)
        const isHalfShown = slideInAt > sliderImage.offsetTop; 
        // 이미지 중간이 되려면 이미지에서부터 top(문서 기준 이미지의 Y축 위치값)까지의 길이가 이미지의 중간 위치보다 작아야함!
        const isNotScrolledPast = window.scrollY < imageBottom;
        // 스크롤 높이가 이미지 bottom의 위치를 넘어가지 않아야 함! -그래야 이미지를 지나면 이미지가 active되지 않는 다음에 올 기능이 작동됨
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        } // 이미지 중간에 오면 이미지가 나타났다가 스크롤이 이미지를 지나면 기능이 사라져서 이미지가 다시 opacity 0이 됨
      });
    }

    window.addEventListener('scroll', debounce(checkSlide));