ImageReveal

@hua-labs/ui/advanced

v1.0.0

스크롤 또는 인터랙션에 반응하는 리빌 애니메이션 이미지 컴포넌트.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ImageReveal } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

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

Props

이름	타입	기본값
`src*`	`string`	-
`alt*`	`string`	-
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`
`threshold`	`number`	`0.3`
`height`	`string`	`"400px"`
`overlayColor`	`string`	-
`dot`	`string`	-
`style`	`React.CSSProperties`	-

코드 예시

기본 사용법

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

<ImageReveal
  src="/photo.jpg"
  alt="Scenic mountain view"
  direction="left"
/>

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

// Reveal from right
<ImageReveal src="/hero.jpg" alt="Hero" direction="right" />

// Reveal from bottom
<ImageReveal src="/feature.jpg" alt="Feature" direction="up" />

// Reveal from top
<ImageReveal src="/bg.jpg" alt="Background" direction="down" />

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

<ImageReveal
  src="/hero.jpg"
  alt="Hero image"
  direction="up"
  height="600px"
  overlayColor="rgba(0, 0, 0, 0.4)"
  threshold={0.2}
/>

HorizontalScroll KanbanBoardPro