[JavaScript30] Day 13

Slide in on Scroll

 

스크롤하여 내려가다 이미지 있는 부분에 도달하면 이미지 애니메이션이 작동되는 기능

    const sliderImages = document.querySelectorAll('.slide-in');
    function checkSlide(e) {
      // console.log(e);
      // console.count(e);
      // console.log(window.scrollY);
      sliderImages.forEach(sliderImage => {
        // 이미지의 절반이 보이는 높이까지 스크롤되면 이미지 나옴
        // half way throught the image
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        // console.log(slideInAt);

        //이미지의 아랫부분을 지나쳐 스크롤이 되어지면 이미지 숨김
        // bottom of the image
        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));