src/BackgroundParallax.js

import { noop, getElements } from './modules/utility'

/**
 * Automatically calculate the moving distance from the height of the parent element
 */
export default class BackgroundParallax {
  /**
   * @param {string|NodeList|Element|Element[]} target - Target elements (selector or element object)
   * @param {Object} [options={}]
   * @param {onResize} [options.onResize=noop] - Resize event handler
   * @param {onScroll} [options.onScroll=noop] - Scroll event handler
   * @param {boolean} [options.isRound=false] - Whether transform style value is rounded or not
   * @param {boolean} [options.autoRun=true] - Whether to run automatically
   */
  constructor (target, options = {}) {
    this._els = getElements(target)
    if (this._els.length === 0) {
      this._disabled = true
      return
    }

    const {
      onResize = noop,
      onScroll = noop,
      isRound = false,
      autoRun = true
    } = options

    this._optionOnResize = onResize
    this._optionOnScroll = onScroll
    this._fTansform = `_getTransform${isRound ? 'Round' : ''}`
    this._scrollTarget = document.scrollingElement || document.documentElement

    this._onResize = () => {
      this.update()
      this._optionOnResize(this._windowHeight)
    }
    window.addEventListener('resize', this._onResize)

    this._onLoad = () => {
      this.update()
    }
    window.addEventListener('load', this._onLoad)

    autoRun && this.run()
  }

  /**
   * Cache various values
   */
  _cache () {
    this._windowHeight = window.innerHeight
    const scrollY = window.scrollY || window.pageYOffset

    this._items = this._els
      .map(el => {
        el.style.transform = 'none'
        const willChange = window.getComputedStyle(el).willChange
        el.style.willChange = 'transform'
        if (!(willChange === 'auto' || willChange === 'transform')) el.style.willChange += ', ' + willChange

        return this._cacheElementPos(el, scrollY)
      })
      .filter(item => item)
  }

  /**
   * Each frame of animation
   */
  _tick () {
    const scrollTop = this._scrollTarget.scrollTop
    if (scrollTop !== this._scrollTop) {
      // When the scroll position changes
      this._scrollTop = scrollTop
      this._update()
    }

    this._animationFrameId = requestAnimationFrame(() => { this._tick() })
  }

  /**
   * Update the position of each element
   */
  _update () {
    this._items.forEach(item => this._updateElement(item))

    this._optionOnScroll(this._scrollTop)
  }

  /**
   * Return the value of transform
   */
  _getTransform (position) {
    return `translate3d(0, ${position}px, 0)`
  }

  /**
   * Return the value of transform
   * In order to avoid problems such as bleeding, convert the number to an integers
   */
  _getTransformRound (position) {
    return `translate3d(0, ${Math.round(position)}px, 0)`
  }

  /**
   * Cache various values of one element
   */
  _cacheElementPos (el, scrollY) {
    const bounding = el.getBoundingClientRect()
    const boundingParent = el.parentNode.getBoundingClientRect()
    const top = boundingParent.top + scrollY
    const inPos = top - this._windowHeight
    const outPos = boundingParent.bottom + scrollY

    return {
      el,
      max: boundingParent.height - bounding.height,
      inPos,
      outPos,
      distance: outPos - inPos,
      offset: boundingParent.top - bounding.top
    }
  }

  /**
   * Update the position of one element
   */
  _updateElement (item) {
    if (this._scrollTop > item.outPos) {
      // After the element disappears in the upper direction
    } else {
      const diff = this._scrollTop - item.inPos
      if (diff > 0) {
        // After the element can be seen from below
        const rate = diff / item.distance
        const position = item.offset + item.max - item.max * rate // max - (max - min) * rate

        item.el.style.transform = this[this._fTansform](position)
      }
    }
  }

  /**
   * Run animation
   */
  run () {
    if (this._disabled) return

    this._cache()
    this._animationFrameId = requestAnimationFrame(() => { this._tick() })
  }

  /**
   * Update cache and position
   */
  update () {
    if (this._disabled) return

    this._cache()
    this._update()
  }

  /**
   * Destroy instance
   */
  destroy () {
    if (!this._els) return

    cancelAnimationFrame(this._animationFrameId)

    this._els.forEach(el => {
      el.style.transform = null
      el.style.willChange = null
    })

    window.removeEventListener('resize', this._onResize)
    window.removeEventListener('load', this._onLoad)
  }
}

/**
 * @typedef {function} onResize
 * @param {number} windowHeight - `window.innerHeight`
 */

/**
 * @typedef {function} onScroll
 * @param {number} scrollTop - `document.scrollingElement.scrollTop`
 */