useScrollProgress

@hua-labs/hua/motion

스크롤 진행률 추적 — 읽기 진행 바, 패럴랙스용

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useScrollProgress } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

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

기본 사용법

tsx

const { progress } = useScrollProgress();

return (
  <div
    className="fixed top-0 left-0 h-1 bg-primary"
    style={{ width: `${progress}%` }}
  />
);

API 레퍼런스

옵션

이름	타입	기본값	설명
target	number	-	docs:hooks.use-scroll-progress.options.target
offset	number	0	docs:hooks.use-scroll-progress.options.offset
showOnMount	boolean	false	docs:hooks.use-scroll-progress.options.showOnMount

반환값

이름	타입	설명
progress	number	docs:hooks.use-scroll-progress.returns.progress
mounted	boolean	docs:hooks.use-scroll-progress.returns.mounted

사용 사례

읽기 진행률

글 읽기 진행 바 표시

스크롤 인디케이터

페이지 스크롤 위치 시각화

패럴랙스 효과

스크롤 기반 패럴랙스 레이어

스크롤 애니메이션

스크롤 기반 요소 애니메이션

useInView useScrollReveal