@lucien144/vue3-parallaxy NPM

Parallaxy

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

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.

parallax component vue vue3

@everything-registry/sub-chunk-563

0.1.2

1 year ago

0.1.1

2 years ago

0.1.0

2 years ago