@allardyce/parallax

A Vue Directive Parallax Solution

Live Demo: https://allardyce.gitlab.io/parallax/

Install

yarn add @allardyce/parallax

Setup

import parallax from '@allardyce/parallax'
Vue.use(parallax)

Usage

Default Markup with v-parallax directive

<section class="min">
    <img src="/valid/path/image.jpg" v-parallax />
</section>

Markup with v-parallax directive and additional options

<section class="min">
    <img src="/valid/path/image.jpg" v-parallax="{ direction: 'up', start: 0.2, end: 0.1 }" />
</section>

|Option|Default|Values|Description| |--- |--- |--- |--- | |direction|'down'|'down', 'up', 'left', 'right'|The direction the element moves when scrolling.| |start|0|0 to 1|Decimal giving the percentage of the element to start at. EG: 0.2 = crop top 20% of image.| |end|0|0 to 1|Decimal giving the percentage of the element to end at. EG: 0.1 = crop bottom 10% of image.|

Tip: You can use start and end to change the speed of the parallax scrolling.

Tip: Adding the min class to the parent gives a min-height: 30rem; styling.

Development

Run two terminals

yarn watch

cd docs && yarn serve