Day13: Slide in on Scroll

// Can only trigger once within 20 seconds
function debounce(func, wait = 20, immediate = true) {
  var timeout
  return function () {
    var context = this,
      args = arguments
    var later = function () {
      timeout = null
      if (!immediate) func.apply(context, args)
    }
    var callNow = immediate && !timeout
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
    if (callNow) func.apply(context, args)
  }
}

// When page scrolls to specified height, make images slide in/out of article
function checkSlide() {
  sliderImages.forEach((sliderImage) => {
    // Page scroll distance + screen height - half image height = height for image to slide in
    const slideInAt =
      window.scrollY + window.innerHeight - sliderImage.height / 2

    // Image distance to screen top + image height = distance from image bottom to screen top
    const imageBottom = sliderImage.offsetTop + sliderImage.height

    // Check if reached slide-in height: slide-in height > image distance to screen top
    const isHalfShown = slideInAt > sliderImage.offsetTop

    // Check if not reached slide-out height: page scroll distance < distance from image bottom to screen top
    const isNotScrolledPast = window.scrollY < imageBottom

    // If reached slide-in height and not reached slide-out height, add 'active' style
    if (isHalfShown && isNotScrolledPast) {
      sliderImage.classList.add('active')
    } else {
      sliderImage.classList.remove('active')
    }
  })
}

const sliderImages = document.querySelectorAll('.slide-in')

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