Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

lucien144/vue3-parallaxy

Repository files navigation

💥 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);`"><imgsrc="https://picsum.photos/400"></Parallaxy></template><script setup lang="ts">importParallaxyfrom'@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 ony 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 wheredelta is the position offset of the element relative to the bottom of the viewport.
(delta: string) => transform: translate3d(0, ${delta.value}px, 0);For they axis.
(delta: string) => transform: translate3d(${delta.value}px, 0, 0);For thex axis.
disabledbooleanfalseEnable / disable the parallax effect.
debugbooleanfalseShow the debug panel.

Few notes under the line

  • When using custom animations, always work withtransform: 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, useoverflow: hidden as much as you can.

About

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

Topics

Resources

License

Stars

Watchers

Forks

[8]ページ先頭
©2009-2025 Movatter.jp