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>

ParallaxLayer.vue

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

<script>
export default {
  props: {
    depth: {
      type: Number,
      required: true
    }
  }
}
</script>

ParallaxScene.vue

<template>
  <ul ref="scene" :data-precision="precision"
                  :data-pointer-events="pointerEvents"
                  :data-calibrate-x="calibrateX"
                  :data-calibrate-y="calibrateY"
                  :data-invert-x="invertX"
                  :data-invert-y="invertY"
                  :data-limit-x="limitX"
                  :data-limit-y="limitY"
                  :data-scalar-x="scalarX"
                  :data-scalar-y="scalarY"
                  :data-friction-x="frictionX"
                  :data-friction-y="frictionY"
                  :data-origin-x="originX"
                  :data-origin-y="originY">
    <slot></slot>
  </ul>
</template>

<script>
import Parallax from 'parallax-js'

export default {
  props: {
    precision: {
      type: Number
    },
    pointerEvents: {
      type: Boolean
    },
    calibrateX: {
      type: Boolean
    },
    calibrateY: {
      type: Boolean
    },
    invertX: {
      type: Boolean
    },
    invertY: {
      type: Boolean
    },
    limitX: {
      type: [Boolean, Number]
    },
    limitY: {
      type: [Boolean, Number]
    },
    scalarX: {
      type: Number
    },
    scalarY: {
      type: Number
    },
    frictionX: {
      type: Number
    },
    frictionY: {
      type: Number
    },
    originX: {
      type: Number
    },
    originY: {
      type: Number
    }
  },
  mounted() {
    this.parallax = new Parallax(this.$refs.scene)
  },
  beforeDestroy() {
    this.parallax.disable()
  }
}
</script>

Requirements.txt

Install branch v3 of parallax-js library (until version 3 is released):

    npm install --save wagerfield/parallax#v3

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

    npm install --save parallax-js