Skip to content

Instantly share code, notes, and snippets.

@pmkay

pmkay/Example_of_use.vue

Forked from wilcorrea/Example_of_use.vue
Created July 19, 2018 23:00
Download ZIP

Revisions

  1. @lbssousa lbssousa revised this gist Apr 25, 2017. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion Requirements.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    Install branch v3 of parallax-js library (until version 3 is released):

    npm install --save wagerfield/parallax#v3
    npm install --save wagerfield/parallax#v3

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

    npm install --save parallax-js
  2. @lbssousa lbssousa created this gist Apr 25, 2017.
    18 changes: 18 additions & 0 deletions Example_of_use.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <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>
    16 changes: 16 additions & 0 deletions ParallaxLayer.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <template>
    <li class="layer" :data-depth="depth">
    <slot></slot>
    </li>
    </template>

    <script>
    export default {
    props: {
    depth: {
    type: Number,
    required: true
    }
    }
    }
    </script>
    75 changes: 75 additions & 0 deletions ParallaxScene.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    <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>
    3 changes: 3 additions & 0 deletions Requirements.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Install branch v3 of parallax-js library (until version 3 is released):

    npm install --save wagerfield/parallax#v3