Parallazy

Parallazy is a parallax plugin that doesn't do much on its own.

Per default it adds classNames to elements when they enter the viewport. With the help of callbacks however, you can implement a huge variety of effects.

You can track the element when it's visible or as it enters the viewport and even create your own bounding box. While visible a callback delivers progress values, exposing how far the element is from either side of the bounding box.

Additionally you can define callbacks when the element is out of bound on either side.

• Links
• Usage
  • Multiple instances
  • Options
  • Destroy
• Developing

Links

• Old demo
• Examples 1

Usage

yarn add parallazy

Multiple instances

import Parallazy from 'parallazy'

const elements = Array.from(document.querySelectorAll('.parallazy'))

const parallazies = elements.map(el => {
  const parallazy = new Parallazy()
  parallazy.init(el)
  return parallazy
})

Options

• {object} classNames
  • {string} classNames.visibleX
  • {string} classNames.visibleY
  • {string} classNames.pluginLoaded
• {boolean} entering
• {object} offset
  • {number|function} offset.top
  • {number|function} offset.right
  • {number|function} offset.bottom
  • {number|function} offset.left
• {number} decimals
• {array.<string>} events
• {function|null} onProgress
• {function|null} onTop
• {function|null} onRight
• {function|null} onBottom
• {function|null} onLeft

Classnames

Use an object of classNames to add custom classes when the plugin is loaded and when the element is visible.

Entering

An element can be tracked while it's entering and leaving the bounding box.
Optionally you can decide to prevent tracking until the element is fully visible.
Both options respect the offset option.

Offset

Offset allows you to create a ghost bounding box.
You can either pass a number or a function while each property defaults to 0.

const offset = {
  top() {
    window.innerHeight / 2 // will always subtract half of the window height, even after resize
  },
  right() {
    element.offsetWidth / 2 // will always subtract half of the element width, even after size change
  },
  left: 100 // will always subtract 100,
  // bottom is not set so `0` will be used
}

Decimals

Defines how many decimals you want to return.

const options = {
  decimals: 4,
  onProgress({top}) {
    console.log(top) // 0.0000, 0.0003
  }
}

Events

Per default scroll and resize are tracked. You can add or remove events here.

Callbacks

The plugin calls multiple calbacks when defined.
The main callback is onProgress which is called with an object. It is only called if the element is considered in bound.
The other callbacks are once. They are reset when onProgress is called (the element is in bound).

const options = {
  onProgress(p) {
    console.log(p) // => {top: 0, right: 0.7, bottom: 1, left: 0.3}
  },
  onTop() {
    console.log('Out of bounds top') // only called once until reset
  }
}

Full example

import Parallazy from 'parallazy'

const elements = Array.from(document.querySelectorAll('.parallazy'))

const parallazies = elements.map(el => {
  // configure instance
  const parallazy = new Parallazy({
    classNames: {
      visibleX: styles.visibleX,
      visibleY: styles.visibleY,
      pluginLoaded: styles.pluginLoaded
    },
    offset: {
      bottom: 100,
      top: -100
    },
    decimals: 2,
    entering: false,
    events: ['scroll'],
    onProgress({top}) {
      el.style.setProperty('--progress-y', top)
    },
    onTop() {
      el.style.setProperty('--progress-y', 1)
    },
    onBottom() {
      el.style.setProperty('--progress-y', 0)
    }
  })
  // initialize instance
  parallazy.init(el)
  return parallazy
})

Destroy

import Parallazy from 'parallazy'

const parallazy = new Parallazy()
// Initialize instance.
parallazy.init(document.querySelector('.parallazy'))
// Destroy instance.
parallazy.destroy()

Developing

To start a dev server and start developing try the following commands

• start: starts the dev server and builds the required files
• test: runs test and lints files
• dev: starts the dev server and watches the required files
• babel: generates lib from source
• build: builds all files from source
• watch: builds and watches all files from source
• lint: lints JavaScript files
• release: release new version using "standard-version"

© 2017 by Gregor Adams