Performant Parallax Scrolling Effect For Images & Videos – vue3-parallaxy

parallaxy a lightweight Vue 3 component that makes it easy to add parallax scrolling effects to your web apps. It supports responsive breakpoints and custom animation callbacks for maximum flexibility.

The component can parallax any media element, like images or videos, in the x or y axis as the page scrolls. This creates an immersive scrolling experience and visual flair.

How to use it:

1. Import the vue3-parallaxy component.

<script setup lang="ts">
import Parallaxy from '@lucien144/vue3-parallaxy';
</script>

2. Add your parallax image (or any element) to the vue3-parallaxy component.

<template>
  <Parallaxy>
    <img src="parallax.png" />
  </Parallaxy>
</template>

<template>
  <Parallaxy>
    <video autoplay muted loop playsinline>
      <source src="/video.mp4">
    </video>
  </Parallaxy>
</template>

3. Possible component props.

axis: {
  type: String,
  default: 'y',
  validator: (val: string) => ['x', 'y'].includes(val),
},
speed: {
  type: Number,
  default: 50,
},
direction: {
  type: String,
  default: 'normal',
  validator: (val: string) => ['normal', 'opposite'].includes(val),
},
animation: {
  type: Function,
  required: false,
},
disabled: {
  type: Boolean,
  default: false,
},
debug: {
  type: Boolean,
  default: false,
},
breakpoints: {
  type: Object as PropType<{[key: number]: ParallaxyPropsType}|undefined>,
  required: false,
},

Preview:

Download Details:

Author: lucien144

Live Demo: https://parallaxy.144.wtf/#example-1

Download Link: https://github.com/lucien144/vue3-parallaxy/archive/refs/heads/main.zip

Official Website: https://github.com/lucien144/vue3-parallaxy

Install & Download:

# NPM
$ npm i @lucien144/vue3-parallaxy