0.0.1 • Published 5 years ago
vue-parallax-davipereira v0.0.1
Vue Parallax
vue-parallax is a Vue.js plugin to create parallax effects on your websites or templates. It is very lightweight to download and rendering by your browser.
Current Version:
0.1
Installation:
Installing this plugin is very easy.
npm i vue-parallax-davipereiraFire up the plugin with any css selector. You must have a background image set into that element or you can use the data-image attribute, will explain about this later. Also, make sure the parallax element must have some height or some content which has some height.
import Parallax from '../components/Parallax.vue'
components: { Parallax }
<parallax class="parallax" image="https://i.ytimg.com/vi/5qEUC1iE1fI/maxresdefault.jpg" speed="0.2">
<div class="container">
<h3 class="title">Title</h3>
</div>
</parallax>Options:
| Option | Description | Default |
|---|---|---|
| speed | Speed of the parallax. You can use any floating point number. But practically, give any fractional number between -1 and 1. Example: 0.3 or -0.5 | 0.2 |
| repeat | Should the background repeat or not. Possible values: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat' | 'no-repeat' |
| size | background size of the image. Possible values: 'auto', 'contain', 'cover' | 'cover' |
| pos_x | Position of the image horizontally. Possible values: 'left', 'center', 'right' or any percentage like: '30%' | 'center' |
| offset | The parallax offset. Possible values: Any integer. | 0 |