Vue component wrapper around parallax-js

Example_of_use.vue

<template>
  (...)
  <parallax-scene :scalar-x="25" :scalar-y="15">
    <parallax-layer :depth="0.00">
      <img src="~assets/parallax/0_sun.png" style="position: relative; top: -4px;" draggable="false" alt="">
    </parallax-layer>
    <parallax-layer :depth="0.33">
      <img src="~assets/parallax/1_mountains.png" style="position: relative; top: 40px;" draggable="false" alt="">
    </parallax-layer>
    <parallax-layer :depth="0.67">
      <img src="~assets/parallax/2_hill.png" style="position: relative; top: 40px;" draggable="false" alt="">
    </parallax-layer>
    <parallax-layer :depth="1.00">
      <img src="~assets/parallax/3_wood.png" style="position: relative; top: 120px;" draggable="false" alt="">
    </parallax-layer>
  </parallax-scene>
  (...)
</template>

<script>
import ParallaxScene from 'path/to/ParallaxScene.vue'
import ParallaxLayer from 'path/to/ParallaxLayer.vue'

export default {
  components: {
    ParallaxScene,
    ParallaxLayer
  },
  (...)
}
</script>

<style>
(...)
</style>

ParallaxLayer.vue

<template>
  <li :data-depth="depth">
    <slot></slot>
  </li>
</template>

<script>
export default {
  name: 'parallax-layer',
  props: {
    depth: {
      type: Number,
      required: true
    }
  }
}
</script>

ParallaxScene.vue

<template>
  <ul ref="scene">
    <slot></slot>
  </ul>
</template>

<script>
import Parallax from 'parallax-js'

function isNumberOrFalse(value) {
  return value === false || typeof value === 'number'
}

export default {
  name: 'parallax-scene',
  props: {
    relativeInput: { type: Boolean, default: undefined },
    clipRelativeInput: { type: Boolean, default: undefined },
    hoverOnly: { type: Boolean, default: undefined },
    inputElement: HTMLElement,
    calibrateX: { type: Boolean, default: undefined },
    calibrateY: { type: Boolean, default: undefined },
    invertX: { type: Boolean, default: undefined },
    invertY: { type: Boolean, default: undefined },
    limitX: { validator: isNumberOrFalse },
    limitY: { validator: isNumberOrFalse },
    scalarX: Number,
    scalarY: Number,
    frictionX: Number,
    frictionY: Number,
    originX: Number,
    originY: Number,
    precision: Number,
    pointerEvents: { type: Boolean, default: undefined },
    onReady: Function
  },
  computed: {
    /**
     * Returns an object with all actually passed props and their values.
     *
     * Example:
     *   input: <parallax-scene :scalar-x="25" :scalar-y="15"></parallax-scene>
     *   output: { scalarX: 25, scalarY: 15 }
     */
    options() {
      return Object.keys(this.$options.props).reduce((acc, key) =>
        Object.assign(acc, this[key] !== undefined ? { [key]: this[key] } : {}),
        {})
    }
  },
  mounted() {
    this.parallax = new Parallax(this.$refs.scene, this.options)
  },
  beforeDestroy() {
    this.parallax.disable()
  }
}
</script>

Requirements.txt

Install latest version of parallax-js library from GitHub (until version 3 is released in NPM):

    npm install --save wagerfield/parallax

When version 3 is released in NPM, you can install it normally:

    npm install --save parallax-js