vue-parallax-wrapper v1.0.1

vue-parallax-wrapper

Vue component wrapper for parallax effect using vue slot that let you define parallax scenario for your components with desired each start and end value related to the scroll position.

✨ This library compatible with vue 2 and vue 3 ✨

Install

# yarn
yarn add vue-component-wrapper

# npm
npm i vue-component-wrapper

Usage

<template>
  <Parallax :configs="parallaxConfigs" v-slot="{ values: {
    contentOpacity,
    contentTranslateX,
  } }">
    <section
      class="fixed top-0">
      <div class="w-full" :style="{ opacity: contentOpacity, transform: `translateX(${contentTranslateX}px)`}">
        Parallax Content
      </div>
    </section>
  </Parallax>
</template>

<script setup lang="ts">
import { Parallax, Config } from 'vue-parallax-wrapper';

const parallaxConfigs = [
  {
    start: 0,
    end: 300,
    variable: 'contentOpacity',
    startValue: 0,
    endValue: 1,
  },
  {
    start: 0,
    end: 300,
    variable: 'contentTranslateX',
    startValue: -80,
    endValue: 0,
  },
  {
    start: 500,
    end: 800,
    variable: 'contentTranslateX',
    startValue: 0,
    endValue: 80,
  },
] as Config[];
</script>

Parallax Config

License

MIT License.