Parallax

v1.1.0

Component that provides parallax effect in response to scrolling. Supports various directions, speeds, and additional effects.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Parallax } from "@hua-labs/ui/advanced";

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

스크롤해서 패럴렉스 효과 확인

direction="up"

direction="down"

direction="left"

direction="right"

✨

scale + opacity + rotate

이름	타입	기본값	설명
`speed`	`number`	`0.5`	Parallax speed (0-1, 1 is fastest)
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Movement direction
`offset`	`number`	`0`	Starting offset in pixels
`disabled`	`boolean`	`false`	Disable parallax effect
`scale`	`boolean`	`false`	Add scale effect based on scroll position
`opacity`	`boolean`	`false`	Add opacity effect based on scroll position
`rotate`	`boolean`	`false`	Add rotation effect based on scroll position
`rotateDirection`	`"cw" \| "ccw"`	`"cw"`	Rotation direction (clockwise or counter-clockwise)

docs:common.basicUsagetsx

import { Parallax } from '@hua-labs/ui/advanced';

<Parallax speed={0.3}>
  <div className="bg-gradient-blur" />
</Parallax>

docs:components.parallax.demo.differentDirectionstsx

<Parallax direction="up" speed={0.4}>
  <div>Moves up</div>
</Parallax>

<Parallax direction="down" speed={0.4}>
  <div>Moves down</div>
</Parallax>

docs:components.parallax.demo.withEffectstsx

<Parallax speed={0.5} scale opacity rotate>
  <div className="floating-card">✨</div>
</Parallax>