Sub Navigation Tiles: Default

/** SCROLLING PARALLAX FUNCTIONALITY
 * Creates a horizontal parallax effect on image child elements
 * Takes the following options:
 * scrollContainer: the parent element that scrolls
 * items: the items that should should have a parallaxed image
 * minXPosition / maxX position: The distance which the image should be able to travel
 *
 * * */

export default class HorizontalScrollParallax {
  constructor({
    scrollContainer,
    itemElements,
    maxXPosition = 20,
    minXPosition = -20,
  }) {
    this.maxXPosition = maxXPosition;
    this.minXPosition = minXPosition;

    this.scrollContainer = scrollContainer;

    this.items = Array.from(itemElements).map(item => {
      const img = item.querySelector('img');

      // Adding a hack to stop jumpiness from debouncing the animation
      // TODO: This could be replaced with something like VirtualScroll
      // https://github.com/ayamflow/virtual-scroll
      // TODO: This check for `img` is a stopgap to allow the JS to continue running if
      // an image is missing. But, this may require more thought about what to do with the
      // parallax when there are images missing.
      if (img) {
        img.style.transition = `transformx 0.1s`;
      }

      const { clientWidth, offsetLeft } = item;
      const bounds = item.getBoundingClientRect();

      // The positions at which the item should stop animating
      // We are going to calculate an x position based on how far it is between these walls
      const leftWall = bounds.left - window.innerWidth;
      const rightWall = bounds.right;

      return { bounds, clientWidth, offsetLeft, img, leftWall, rightWall };
    });

    this.parallaxRunning = false;
  }

  parallax() {
    const lastScrollPosition = this.scrollContainer.scrollLeft;

    window.requestAnimationFrame(() => {
      const itemsInView = this.items.filter(
        item =>
          lastScrollPosition + window.innerWidth >= item.bounds.left &&
          lastScrollPosition < item.bounds.right
      );

      itemsInView.forEach(({ leftWall, rightWall, img }) => {
        // Calculate how far the item is along the screen
        const percentage =
          ((lastScrollPosition - leftWall) * 100) / (rightWall - leftWall);

        // The distance which the image should be able to travel

        const x =
          (percentage / 100) * (this.minXPosition - this.maxXPosition) +
          this.maxXPosition;

        if (img) {
          // eslint-disable-next-line no-param-reassign
          img.style.transform = `translateX(${x}px) `;
        }
      });
    });
  }

  initParallax() {
    if (this.parallaxRunning) {
      return;
    }

    this.parallaxRunning = true;
    this.parallax();

    this.scrollContainer.addEventListener('scroll', () => this.parallax());
  }

  destroyParallaxScrolling() {
    if (!this.parallaxRunning) {
      return;
    }

    this.parallaxRunning = false;
    this.scrollContainer.removeEventListener('scroll', () => this.parallax());

    Array.from(this.items).forEach(item => {
      // eslint-disable-next-line no-param-reassign
      item.img.style.transform = `translateX(0)`;
    });
  }
}