Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue component wrapper around parallax-js
<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>
<template>
<li :data-depth="depth">
<slot></slot>
</li>
</template>
<script>
export default {
name: 'parallax-layer',
props: {
depth: {
type: Number,
required: true
}
}
}
</script>
<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>
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment