vue3 parallaxy

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

lucien144
25
0
Vue

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.