13 - Slide in on Scroll

Slide in on Scroll

When scrolling through the page, the images will slide in as soon as the user reaches half the height of the imgage. These will slide out when the user keeps scrolling.

Notes

• There are some calculations to know where exactly the user is reference to an image.

    // half way through the image
    const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
    // bottom of the image
    const imageBottom = sliderImage.offsetTop + sliderImage.height;
    // is the user offset position along the image's heigh?
    const isHalfShown = slideInAt > sliderImage.offsetTop;
    // did not he already pass the image's heigh??
    const isNotScrolledPast = window.scrollY < imageBottom;

• Debounce function limits the rate at which a function can fire. Ensures that a given task doesn't fire so often that it bricks browser performance. More info

    function debounce(func, wait = 20, immediate = true) {
      let timeout;
      return function () {
        let context = this,
          args = arguments,
          later = () => {
            timeout = null;
            if (!immediate) func.apply(context, args);
          },
          callNow = immediate && !timeout;
  
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
  
        if (callNow) func.apply(context, args);
      };
    }
    ```

Events

• scroll