@lucien144/vue3-parallaxy

Lightweight yet powerful parallax component for Vue3.
14,889 27
vue vue3 component parallax
Install
npm install @lucien144/vue3-parallaxy
Latest Version:0.1.2
Vue:3
License:MIT
Last Updated:Jan 26, 2024
Links: GitHub  ·  npm
Maintainer: lucien144

Parallaxy

💥 Lightweight yet powerful parallax component for Vue3 with breakpoints option and animation callback. Nuxt3 ready.

👉 Examples and usage here. 👈

Installation

npm i @lucien144/vue3-parallaxy
# yarn add @lucien144/vue3-parallaxy

Usage

<template>
	<Parallaxy :speed="20" :animation="(delta: number) => `transform: translate3d(0, ${delta}px, 0);`">
		<img src="https://picsum.photos/400">
	</Parallaxy>
</template>

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

Props

Props Type Default / Options Description
axis string y / y, x Axis of the movement.
speed number 50 Speed of the movement. Higher number -> faster. Negative values changes the direction.
direction string normal / normal, opposite Direction of the movement. normal -> up on y axis etc.
breakpoints object undefined / {[breakpoint: number]: {ParallaxyOptions}} You can specify all props for different breakpoints. If window width >= breakpoint then the settings is applied, zero breakpoint is the default settings. See the Example 5.
animation Function (delta: string) => ... Custom CSS style animation where delta is the position offset of the element relative to the bottom of the viewport.
(delta: string) => transform: translate3d(0, ${delta.value}px, 0); For the y axis.
(delta: string) => transform: translate3d(${delta.value}px, 0, 0); For the x axis.
disabled boolean false Enable / disable the parallax effect.
debug boolean false Show the debug panel.

Few notes under the line

  • When using custom animations, always work with transform: translate3d(0, 0, 0) to turn on the GPU acceleration.
  • Keep in mind that moving element may run out of it's bounding box, thus, use overflow: hidden as much as you can.

Related Packages

vue-parallax-view

Create a composite control that displays different images that react to the mous...

1,090 10
parallax vue
vue-parallax

Scrolls a image slower than the window to create a neat optical effect

2,516 82
component parallax vue
vue-parallax-js

Tiny vue component that adds a directive for parallax effect on elements.

40,964 117
parallax vue vue parallax vue-component
vue-rellax

A plugin of Vue that adds a directive for parallax effect by rellax.js.

7,459 42
parallax vue rellax vue plugin
vue-flux

Vue image and other resources slider

25,152 551
parallax vue carousel image slider

Version History

Version Released Vue License
0.1.2 ^3.2.45 MIT
0.1.1 ^3.2.45 MIT
0.1.0 ^3.2.45 MIT