0.1.2 • Published 1 year ago

@lucien144/vue3-parallaxy v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

PropsTypeDefault / OptionsDescription
axisstringy / y, xAxis of the movement.
speednumber50Speed of the movement. Higher number -> faster. Negative values changes the direction.
directionstringnormal / normal, oppositeDirection of the movement. normal -> up on y axis etc.
breakpointsobjectundefined / {[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.
animationFunction(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.
disabledbooleanfalseEnable / disable the parallax effect.
debugbooleanfalseShow 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.
0.1.2

1 year ago

0.1.1

2 years ago

0.1.0

2 years ago